如何清除反应状态数组？答案

【问题标题】：how to clear the react state array?如何清除反应状态数组？
【发布时间】：2017-08-16 13:20:06
【问题描述】：

如何清除 react 状态变量（Array）中已有的数据，并为其分配另一个数组。我尝试了下面的东西，但它不起作用。

    itemsChanged(items) {
        this.setState({item : []})    //item is my state variable
        this.setState({item : items})
        console.log("ITEMS : ",this.state.item)   //this  will not print the updated value
    }

提前致谢

【问题讨论】：

设置 this.setState({ item: items }) 如果它是不同的项目集合，则应该已经覆盖现有数组。 setState 是异步的，因此您的控制台可能会在操作实际完成之前触发
请通过这个：stackoverflow.com/questions/42593202/…
要检查结果状态，您需要像这样在处理程序中移动 console.log：this.setState({item : []}, function() {console.log("ITEMS : ",this.state.item)})
Why calling setState method doesn't mutate the state immediately?的可能重复

标签： javascript arrays reactjs redux react-redux

【解决方案1】：

您不需要先分配一个空数组。只需将新数组传递给它。它不起作用的唯一原因是setState 是一个异步调用。像这样使用它

 this.setState({item : items}, () => console.log("ITEMS : ",this.state.item) )

【讨论】：

@narenmnp 如果对您有帮助，请接受答案。

【解决方案2】：

根据React's docs

React 可以将多个 setState() 调用批处理到单个更新中以提高性能。

如果你想在setState 之后检查你的状态值，你应该这样做：

this.setState({item : items}, () => console.log(this.state.item));

【讨论】：

【解决方案3】：

setState 是一种异步方法。因此，当您在控制台上打印它时，它仍然可以更新。您可以在返回渲染之前使用控制台日志。

...

render(){
  console.log("ITEMS : ",this.state.item);
  return (<div>...</div>)
}
...

【讨论】：

【解决方案4】：

正如他们所描述的：

setState(updater, [callback])

所以这可能表明它不是同步操作。

用途：

itemsChanged(items) {
  var me = this;

  me.setState({item : items}, function(){
         console.log("ITEMS : ", me.state.item);
    });
}

【讨论】：

【解决方案5】：

关于setState，您应该了解的一点是它是异步工作的。如果您在调用setState 后直接尝试console.log 状态，您将看不到任何更改。

您也不必通过使用空数组调用setState 来清除数组——您只需将当前数组替换为新数组即可。

this.setState({ items: newItems });

如果您想记录更改，我建议您尝试在组件的 componentShouldUpdate 方法中进行。

【讨论】：

【解决方案6】：

setState是一个异步函数，如果你这样写代码：

this.setState({xxState})
console.log(this.state.xxState)

程序会先执行console.log，所以你应该这样写：

this.setState（｛xxx｝，（）=> ｛
    console.log（this.state.....）
｝）

而且效果会很好。

【讨论】：