我有一个列表,只想设置事件处理程序上的第二项。我正在尝试设置 usinglists: this.state.lists[1]
但它抛出一个错误说this.state.lists.map is not a function
. 从列表中设置项目的正确方法是什么?这是我在做什么:
constructor(props) {
super(props);
this.state = {
lists: []
};
this.buttonAHandler = this.buttonAHandler.bind(this);
}
componentDidMount() {
fetch('https://api.com')
.then(response => response.json())
.then(data => this.setState({ lists: data }));
}
buttonAHandler(e) {
this.setState({
lists: this.state.lists[1]
})
}
在我的渲染返回中,我像这样绑定处理程序。:
render(){
return (
<div>
<button onClick={this.buttonAHandler.bind(this)} >see pets</button>
您收到错误消息,因为单击后,lists
状态从 anArray
变为 a Object
(数组的索引 1)。因此,如果您仍想使用该map()
方法,请将处理程序更改为:
buttonAHandler(e) {
this.setState({
lists: [this.state.lists[1]]
})
}
然后,新lists
状态将是Array
您想要的元素。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句