Блог

Я знаю, что setState является асинхронным, но есть ли в любом случае (без Redux) возможность вызвать setState после выполнения другой функции ранее, как показано ниже:

 handleOpenUpdateItem = (item) => {
    const { getImageByItemId } = this.props;
    getImageByItemId(item.id);
    this.setState({ updateMode: true, item });
  };
  

Приветствую!

Превратите свой handleOpenUpdateItem в async функцию. Затем вы можете написать синхронный код внутри нее.

   async handleOpenUpdateItem(item) {
       const { getImageByItemId } = this.props;
       const item = await getImageByItemId(item.id); // wait for the call to the backend to finish
       this.setState({ updateMode: true, item }); 
  };
  

Как уже упоминалось в комментариях, вы могли бы использовать обратные вызовы, чтобы убедиться, что this.setState выполняется после завершения вашей функции (использование Promises или async/await тоже было бы отличным вариантом). Это пример того, как это может быть реализовано:

   getImageByItem = (id, callback) => {
    // Do something here
    // And return your image, or anything you want through callback like so:
    callback(yourImage)
  }

  handleOpenUpdateItem = (item) => {
    const { getImageByItemId } = this.props;
    getImageByItemId(item.id, (image) => {
      this.setState({ updateMode: true, item });
    });
  };
  

Итак, вы изменяете свою getImageByItem функцию, чтобы включить обратный вызов, а затем в handleOpenUpdateItem вы используете этот обратный вызов и setState внутри него.

РЕДАКТИРОВАТЬ ДЛЯ 2019

Поскольку @Levitator Disbалансирован, упомянутый ниже, вероятно, лучше использовать Promises , чтобы вы могли реализовать его следующим образом:

Без асинхронности / ожидания:

 getImageByItemId = (id) => {
  return new Promise((resolve, reject) => {
    // Do something with your id/image, then resolve
    resolve()
    // Or reject when some error happens
    reject()
  })
}

  handleOpenUpdateItem = (item) => {
    const { getImageByItemId } = this.props;
    getImageByItemId(id)
      .then(() => {
        this.setState({ updateMode: true, item });
      })
      .catch(() => {
        // ... handle your reject here
      })
  };
  

Или вы могли бы использовать async/await вот так:
Асинхронный / ожидающий:

 getImageByItemId = (id) => {
  return new Promise((resolve, reject) => {
    // Do something with your id/image, then resolve
    resolve()
    // Or reject when some error happens
    reject()
  })
}

handleOpenUpdateItem = async (item) => {
  const { getImageByItemId } = this.props;
  let something = await getImageByItemId(item.id)
  // or just:
  // await getImageByItemId(item.id)
  this.setState({ updateMode: true, item });
};
  

this.setState() быть асинхронным означает, что вы не можете нормально выполнять что-то после этого и ожидать, что это произойдет только после завершения setState. Выполнение чего-либо до setState, а затем вызов setState (точно так же, как вы делали) будут работать из коробки.

Вы могли бы сделать handleOpenUpdateItem асинхронным и использовать await для getImageByItemId.