Как получить уведомление, если состояние изменено асинхронной функцией в preact или реакции - PullRequest
Новая
       8

Как получить уведомление, если состояние изменено асинхронной функцией в preact или реакции

0 голосов
/ 18 апреля 2019

У меня есть компонент preact, который асинхронно извлекает данные из API, и если данные извлекаются, я сохраняю их в состоянии, затем я отображаю эти данные с помощью другой функции, но кажется, что при изменении состояния они не воспроизводятся. Например, мой метод извлечения данных с использованием axios такой: 

axios.get('https://my.api.mockaroo.com/products?key=24ebcce0').then(response =>{this.setState({allProductsDummy : response.data});
      console.info('will mount all data',this.state.allProductsDummy);
    });

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

Примечание: я разделяю метод выборки и отображения, потому что при отображении данных мне нужно сначала выполнить фильтрацию.

1 Ответ

1 голос
/ 18 апреля 2019

Метод 1

Как правильно заметил @Alexander в своем комментарии, лучший способ «подписаться» на конкретное изменение состояния, о котором вы говорите, - это когда axios вызов API завершен и установлен в состояние.

this.setState() принимает второй аргумент, который является обратным вызовом, который вызывается сразу после установки состояния. 

axios.get('https://my.api.mockaroo.com/products?key=24ebcce0').then(response => {
  this.setState({
    allProductsDummy: response.data
  }, () => {
        // Do whatever you wanna do with the now loaded state
      display()
  });
});

Метод 2

React имеет метод жизненного цикла, который называется componentDidUpdate, который принимает в качестве аргументов предыдущий реквизит и предыдущее состояние.Вы можете написать функцию так, чтобы она проверяла, изменено или нет значение состояния allProductsDummy. 

componentDidUpdate(prevProps, prevState) {
  if (prevState.allProductsDummy !== this.state.allProductsDummy) {
    // If unequal, then execute
    display()
  }
}

Теперь вышеприведенное будет работать для большинства примитивов (строка, число, логическое значение), но нетак для объектов, потому что в javascript {a:1, b:2} !== {a:1, b:2} будет иметь значение true, поэтому вам, возможно, придется отдельно позаботиться о равенстве объектов, либо импортировав _lodash, либо сделав собственную вспомогательную функцию.

...