React状态扩展多级对象不起作用

Question

状态默认值

state = {
        moveType: {
            value: 0,
            open: false,
            completed: false
        }
    };

//回调以更新新状态

let step = 'moveType';
let val = 3; // new value
let newObj = { ...this.state[step], value: val };
console.log(newObj);
this.setState({[step]: newObj }, function () {console.log(this.state);});

console.log(newObj)显示适当的新值，但是 this.state仍然显示旧值。.你能告诉我我在做什么错吗？

Answer 1

在react中设置状态是非常敏感的事情。我曾经曾经经常使用的最佳实践是控制对象深度合并并使用this.setState(state => { ... return new state; })呼叫类型，例如在此示例中：

this.setState(state => ({
  ...state,
  [step]: { ...(state[step] || {}), ...newObj },
}), () => console.log(this.state));

摘要更新开始

[step]: { ...state[step], ...newObj }

更改为：

[step]: { ...(state[step] || {}), ...newObj }

正确处理案例，当状态没有此step键

时

摘要更新结束

的事情是，当您使用this.state(在let newObj = { ...this.state[step]中(时，它可能具有过时的价值，因为对状态的某些待处理(还没有合并(更改，您仅将几毫秒就称为几毫秒。

因此，我建议使用回调方法：this.setState(state => { ... use state and return new state;})保证您使用的state具有最新值