Question

我有一个列表，只想设置StateEvent事件处理程序上的第二项。我正在尝试使用lists: 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>

Answer 1

您收到错误，是因为单击后lists状态从Array变为Object（数组的索引1）。因此，如果您仍然想使用map()方法，请将处理程序更改为：

buttonAHandler(e) {
   this.setState({
       lists: [this.state.lists[1]]
   })
}

然后，新的lists状态将是Array，其中仅包含您想要的元素。

如何设定清单中的项目

1 个答案: