javascript - 为什么 slice() 在函数中使用时会改变状态

Question

我有以下函数，在开始处列出=[]:

handleAddList(s) {

   var temp = this.state.lists.slice();
   temp.push(s);
   console.log(temp);
   this.setState({lists: temp},console.log(this.state.lists) ); 
}

为什么第一个console.log返回s的值，而第二个console.log返回[]？

另外，为什么如果我删除 slice() 现在两个 console.log 都会显示 s 的值？

Answer 1

第二个控制台日志返回 []，因为它尚未设置，因为对 setState 的调用是异步的。

当您删除 .slice() 时，您将创建对 this.state.lists 的引用并直接更改它，这不是异步的，因此它会立即发生。但是，绝对不应该直接改变状态。

相反，继续使用 .slice() 克隆您的状态，然后根据需要改变克隆和 setState。当您需要查看状态时，您应该使用 react-devtools .