如何清除反应状态数组？

Question

如何清除反应状态变量（数组）中的现有数据并为其分配另一个数组。我已经尝试了下面的方法，但它不起作用。

    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
    }

提前致谢

Answer 1

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

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

Answer 2

根据React's docs

React may batch multiple setState() calls into a single update for performance.

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

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

Answer 3

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

...

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

Answer 4

正如他们所描述的那样：

setState(updater, [callback])

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

使用：

itemsChanged(items) {
  var me = this;

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

Answer 5

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

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

this.setState({ items: newItems });

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

Answer 6

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

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

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

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

而且会很好用。

如何清除反应状态数组？

how to clear the react state array?

javascript

arrays

reactjs

redux

react-redux