Реакция: Как вызвать несколько функций, изменяющих состояние, в одной процедуре?

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 управляет состоянием.Результат этого полностью ошибочен: добавлен только один элемент (из вызова second ).

Конечно, я мог бы сделать addItem приспособленным к нескольким вставкам, но это не является точкой (что еслия хочу вызвать две разные функции?).

Есть ли способ выполнить "атомарный" (я знаю, что Mobx поддерживает это) действия в React, которые вызовут 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 }]
})

Эта версия вычисляет следующее состояние на основе текущего состояния - не на основе состояния в начале функции рендеринга, которое может быть«устаревшие» - и таким образом можно выполнять несколько обновлений таким образом.