ReactJS -无法读取未定义的属性“items”
ReactJS -无法读取未定义的属性“items”
提问于 2017-03-02 10:04:27
我正在学习ReactJS，但我只是偶然发现了这个错误，我找不出这个错误。
我想从子组件更改父组件的items数组状态。我尝试将addItem函数作为道具传递给children组件，在回车时，子组件调用此函数并传入输入值。
当我尝试在addItem方法中使用console.log(this.state.items)时，我得到了这个错误。
Uncaught TypeError: Cannot read property 'items' of undefined主App.js
class App extends Component {
constructor() {
super();
this.state = {
items: []
};
}
render() {
return (
<div className="App">
<p>Todo List</p>
<AddItemBox addNewItem={this.addItem}/>
<ItemsList items={this.state.items}/>
</div>
);
}
addItem(item) {
var listItems = this.state.items;
listItems.push(item);
this.setState({items: listItems});
}
}子组件：AddItemBox.js
class AddItemBox extends Component {
constructor(props) {
super(props);
this.state = {
item: '' // input value
};
}
render() {
return (
<div className='AddItemBox'>
<input type='text' placeholder='add item' onChange={e => {
this.onInputChange(e.target.value)
}} onKeyPress={e => {
if (e.key === 'Enter') {
this.onInputEnter(e.target.value)
}
}}/>
</div>
);
}
onInputChange(item) {
this.setState({item});
}
onInputEnter(item) {
// Now add it to the 'items' array state
this.props.addNewItem(item);
this.setState({item: ''});
}
}回答 2
Stack Overflow用户
发布于 2017-03-02 10:32:14
我可以帮助@AndrewLi解释。看看这个article。它中途解释了为什么需要在React中绑定函数。简单的解释可以归结为scope。
addItem函数中的this是什么？它可能不是你所期望的那样。因此，您必须将适当的this绑定到函数，以便能够以您想要的方式使用它，比如调用this.state.items。如果this不是您期望的this，您将得到不想要的结果。
所以你可以这样做：
constructor(props) {
super(props);
this.state = {
item: '' // input value
};
this.addItem = this.addItem.bind(this)
}
或者，您可以使用es6并执行以下操作：
addItem = (item) => {
var listItems = this.state.items;
listItems.push(item);
this.setState({items: listItems});
}
两者都会给出相同的结果
Stack Overflow用户
发布于 2017-03-02 12:18:03
您可以将函数作为回调传递，而不是将"AddItemBox“组件中的引用作为
class App extends Component {
constructor() {
super();
this.state = {
items: []
};
this.addItem = this.addItem.bind(this);
}
render() {
return (
<div className="App">
<p>Todo List</p>
<AddItemBox addNewItem={(item) => this.addItem(item)}/>
<ItemsList items={this.state.items}/>
</div>
);
}
addItem(item) {
var listItems = this.state.items;
listItems.push(item);
this.setState({items: listItems});
}
}此外，您还需要在构造函数中绑定函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42545545
复制相关文章
相似问题
腾讯云开发者
