React：如何在一个过程中调用多个状态改变函数？

Question

我有一些 "procedure" 想要运行，当我的主要组件安装时：

  componentDidMount() {

    if (process.env.NODE_ENV === 'development') {
      this.addDummyDataForDevelopment();
    }

  }

  addDummyDataForDevelopment = () => {

    this.addItem('yoyo', "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", true);

    this.addItem('welcome', 'heyyyy', false);        

  }

addDummyDataForDevelopment 中的每个函数调用都会操纵状态。结果是完全错误的：仅添加一项（来自 second）调用。

当然我可以让 addItem 容纳多个插入，但这是不对的（如果我想调用两个不同的函数怎么办？）。

有没有办法在 React 中执行 "atomic"（我知道 Mobx 支持它）操作，即使它来自不同的功能，还是我只需要改变我的方法？

编辑：这是我的 addItem 函数：

 addItem = (eventName, data, owner) => {
    const id = uuid();
    const time = this.getTime();
    this.setState({
      items: [...this.state.items, { id, eventName, time, data, owner }]
    })        
  }

Answer 1

你应该使用setState的回调形式：

this.setState((state, props) => ({
  ...state
  items: [...state.items, { id, eventName, time, data, owner }]
})

此版本根据当前状态计算下一个状态 - 而不是基于渲染函数开始时的状态，可能是 'stale' - 因此以这种方式进行多次更新是安全的。

React：如何在一个过程中调用多个状态改变函数？

React: How to call multiple state-changing functions, in one procedure?

javascript

atomic

reactjs