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回调中也不会更新

2 个答案: