即使在 setState 回调中，解构状态也不会更新

Question

存在一个问题，即解构组件的状态会阻止它在 setState 中更新：

state = {
   value: 'test',
   values: ['a', 'b', 'c'],
};

...

const { value, values } = this.state;

this.setState(
  {
    values: [...values, value],
  },
  () => {
    console.log(values);
    // this logs ["a", "b", "c"] rather than ["a", "b", "c", "test"]
  }
);

值的预期输出应该包含新值，但它只记录旧值。使用 "this.state" 很有效，所以只是想知道为什么解构状态对象似乎无法正确更新？

如果您单击按钮并检查控制台日志，您可以转到此 Codesandbox 并亲自尝试一下。

如有任何帮助，我们将不胜感激！

Answer 1

假设如下：

state = {value: 0}
foo = () =>{
    const { value } = this.state
    this.setState({value : value + 1}, () => console.log(value)) //0
}

发生这种情况是因为 value 保留了调用方法 foo() 时的状态值，即使在状态更新后 const 的值也不会改变，因为它是相当于：const value = this.state.value。它是这个值曾经是什么的参考。在这种情况下使用 state 的全局实例来访问更新后的值

this.setState({value : value + 1}, () => console.log(this.state.value))//1

Answer 2

也许你可以尝试这样的事情：

state = {
   value: 'test',
   values: ['a', 'b', 'c'],
};

this.setState(oldState => 
  const { value, values } = oldState;
  return {
    values: [...values, value],
  },
  () => {
    console.log(values);
    // this logs ["a", "b", "c"] rather than ["a", "b", "c", "test"]
  }
);

在您的示例中，您试图打印状态的旧值，即刚刚在 setState 之前发生的值。因此，您基本上是将值设置为过去的值。 setState 实际上还有一个回调函数，您可以从中提取旧状态。在那里你可以解构值等。试试看，祝你好运！

即使在 setState 回调中，解构状态也不会更新

Deconstructed state is not updated even in the setState callback

state

setstate

reactjs