Javascript 如何在preact或react中的异步函数更改状态时获得通知

我有一个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

正如@Alexander在他的评论中正确指出的那样，“订阅”您正在谈论的特定状态更改的最佳方式是当

axios

api调用完成并设置为state时

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，因此您可能需要单独注意对象的相等性，方法是导入

\u lodash

或创建自己的帮助函数。

设置状态应始终触发生命周期的重新运行，无论它来自同步函数还是异步函数，除非你正处于比赛状态。但是，

setState

本身是异步的，因此如果您想在设置了特定状态后才采取一些操作，您应该通过。是的，我知道，但我想要的场景是显示器将订阅状态，当状态更改时，显示数据，无需调用方法检查数据是否加载良好，您只需确保

display（）

位于

render（）

中，并且

位于
display（）
中的.state.allProductsDummy

是否知道每次

state

更改时，

render（）

都会自动为您调用？