在 REACT 中对数组使用 push 后，map 不是函数错误

Question

我在函数（事件）中将一个元素推送到数组中， 将此元素推送到数组后，出现此错误，

handleAddList(s) {
  this.setState({lists :this.state.lists.push(s) });
  console.log(this.state.lists);
}

lists.map 不是函数。 列出一个反应组件

如果我这样写

handleAddList(s) {
  this.setState({lists :['something','something else']});
  console.log(this.state.lists);
}

但是当我手动定义列表时，它运行良好。就在我在数组中推送一个新元素时，我得到了这个错误。此外，如果 push 破坏了数组。 最好的问候

Answer 1

push 的结果是数组的长度，这不是你想要的。您想创建一个包含新对象的新数组：

handleAddList(s) {
  this.setState(
    previousState => {
      return { lists: [...previousState.lists, s] };
    },
    () => {
      console.log(this.state);
    }
  );
}

Answer 2

push返回添加元素后的数组长度而不是数组，你需要的是concat

handleAddList(s) {
    this.setState({lists :this.state.lists.concat([s]) });
}

还有setState doesn't update the state immediately你需要像这样使用回调

handleAddList(s) {
    this.setState({lists :this.state.lists.concat([s]) }, () => { console.log(this.state.lists)});
}