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中执行“ atomic” （我知道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 }]
})

此版本根据当前状态（而不是基于render函数开头的状态可能为“过时”的状态）计算下一个状态，因此可以安全地进行多次更新。

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

1 个答案: