反应状态值不会更新

Question

我正在尝试更新状态并将preview的值设置为undefined，但是它不起作用。

这是我的代码

console.log(preview);
this.setState({ preview }, () => {
    console.log(this.state.preview);
});

我尝试在预览中添加其他内容，但仍然无法正常工作。

undefined
Object { ... }

其他状态值正在起作用，仅此一项是无效的。

更新 另一个奇怪的是，当我更新另一个值时，它将被更新。

例如

this.setState({preview:undefined,media:undefined});

媒体将更新为未定义，但是preview不会。

Answer 1

反应状态更新是异步的，并在下一个渲染/提交周期中进行批处理。这意味着如果代码的任何其他部分还在 更新后将相同状态设置为某个值，而那更新丢失

演示

class App extends Component {
  state = {
    value: "test"
  };

  updateState = () => {
    this.setState({ value: undefined }, () =>
      console.log("value", this.state.value) // logs "test2"!!
    );
    this.setState({ value: "test2" });
  };

  render() {
    return (
      <div>
        <div>state: {this.state.value}</div>

        <button type="button" onClick={this.updateState}>
          Update state
        </button>
      </div>
    );
  }
}