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: ''});
}
}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
复制相关文章
相似问题
腾讯云开发者
