javascript - 在一个过程中 react : How to call multiple state-changing functions,？

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 }]
})

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