ReactJS嵌套的组件属性为空
ReactJS嵌套的组件属性为空
提问于 2020-04-22 03:10:08
我正在尝试在ReactJS中嵌套一些组件，以便构建一个待办事项应用程序，但是当元素传递到映射函数中时，它是未定义的。
嵌套组件：
var El2= class App extends React.Component{
constructor(props) { //constructor
super(props);
this.state = {
todos: ['work out', 'eat breakfast', 'take a shower']/*,
}
}
/**********methods**********/
onDelete(item){
let updatedTodos = this.state.todos.filter(function(val,index){
return item!==val;
});
this.setState({todos:updatedTodos});
}
/********rendering method*******/
render(){
let todos = this.state.todos;
todos=todos.map((item,index)=>{
return(
<TodoItem item={item} key={index} onDelete={this.onDelete}/>
)
})
return(//works kinda like a main function
<div id="todo-list">
<p>the busiest people have the most leisure...</p>
<ul>{todos}</ul>
</div>
);
}//component rendering
}嵌套组件：
//Creating TodoItem component
var TodoItem = class App extends React.Component{
DeleteItem(){
console.log(this); //trying to log the item outputs undefined
this.props.onDelete(this.props.item);
}
render(){
return(
<li>
<div className="todo-item">
<span className="item-name">{this.props.item}</span>
<span className="item-delete" onClick={this.DeleteItem}>X</span>
</div>
</li>
);
}
}当我点击X时，我得到"TypeError: Cannot read property 'props‘of undefined“。我怎么才能解决这个问题，并真正成功地删除对象呢？
回答 3
Stack Overflow用户
发布于 2020-04-22 03:25:38
您的代码中有几个问题。
- 类定义
或者使用类组件
class TodoItem extends React.Component {
}或函数组件
const TodoItem = ({...}) => {
return (
<li>
...
</li>
)
}函数组件必须以不同的方式编写，并且没有this对象。所以可以先使用类组件
- DeleteItem method
常识是在开始时使用小字符，以便deleteItem，但这不是问题。标准方法不受此约束，因此您必须手动执行此操作
<span className="item-delete" onClick={this.DeleteItem.bind(this)}>X</span>更好和更简单的解决方案是使用箭头函数，该函数将自动绑定。
DeleteItem = () => {
console.log(this); //trying to log the item outputs undefined
this.props.onDelete(this.props.item);
}Stack Overflow用户
发布于 2020-04-22 03:27:11
您没有在构造函数内部绑定this.onDelete和this.DeleteItem。您可以对您各自的2个组件执行this.onDelete = this.onDelete.bind(this);和this.DeleteItem = this.DeleteItem.bind(this);。请参考以下代码
var El2 = class App extends React.Component {
constructor(props) {
//constructor
super(props);
this.state = {
todos: ["work out", "eat breakfast", "take a shower"]
};
this.onDelete = this.onDelete.bind(this);
}
/**********methods**********/
onDelete(item) {
console.log(item, this.state.todos);
let updatedTodos = this.state.todos.filter((val, index) => {
return item !== val;
});
this.setState({ todos: updatedTodos });
}
/********rendering method*******/
render() {
let todos = this.state.todos;
todos = todos.map((item, index) => {
return <TodoItem item={item} key={index} onDelete={this.onDelete} />;
});
return (
//works kinda like a main function
<div id="todo-list">
<p>the busiest people have the most leisure...</p>
<ul>{todos}</ul>
</div>
);
} //component rendering
}var TodoItem = class App extends React.Component {
constructor(props) {
super(props);
this.DeleteItem = this.DeleteItem.bind(this);
}
DeleteItem() {
console.log(this.props); //trying to log the item outputs undefined
this.props.onDelete(this.props.item);
}
render() {
return (
<li>
<div className="todo-item">
<span className="item-name">{this.props.item}</span>
<span className="item-delete" onClick={this.DeleteItem}>
X
</span>
</div>
</li>
);
}
};Stack Overflow用户
发布于 2020-04-22 03:52:29
您需要查看有关端口和组件https://pt-br.reactjs.org/docs/components-and-props.html的更多信息
我还建议不要创建这样的类。今天，react推荐制作功能组件。
如下所示：
import React, { useEffect, useState } from "react";
function App(){
const [todos, setTodos] = useState(""); ** hooks to create state**
useEffect(() => {
** acess life cicle
}, [todos]) **in this array is variable react obrseve to update**
----heres come your functions ------
return(
<div id="todo-list">
<p>the busiest people have the most leisure...</p>
<ul>{todos}</ul>
</div>
){
}
}
´´´´
See in documentation about hook in link
<https://pt-br.reactjs.org/docs/hooks-intro.html>
has an example similar to what you are trying to do.
I went a little far in explaining it but I believe it is useful.
I hope I helped.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61351303
复制相关文章
相似问题
腾讯云开发者
