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

Question

当我的主要组件安装时，我有一些我想要运行的“程序”：

  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中的每个函数调用都会操纵状态。结果完全错误：只添加了一个项目（从第二个）调用。

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

有没有办法在React中执行“原子”（我知道Mobx支持它）的动作，它只会触发一次setState，即使它来自不同的函数，或者我只是需要改变我的方法？

编辑：这是我的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 }]
})

此版本基于当前状态计算下一个状态 - 不基于渲染函数开头的状态（可能是“陈旧的”） - 因此以这种方式进行多个更新是安全的。