如果状态被异步函数在 preact 或 react 中更改，如何获得通知

Question

我有一个从 API 异步获取数据的 preact 组件，如果获取了数据，我将其存储在一个状态中，然后我将通过另一个函数显示该数据，但似乎状态是改变它不重新渲染。例如我使用 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() 时它会在加载数据时显示数据，该怎么做？

注意：我将获取和显示的方法分开，因为在显示数据时我需要先进行过滤。

Answer 1

方法一

正如@Alexander 在他的评论中正确指出的那样，'subscribe' 到您正在谈论的特定状态更改的最佳方法是 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()
  });
});

方法二

React 有一个名为 componentDidUpdate 的生命周期方法，它将先前的 props 和先前的状态作为参数。您可以这样编写一个函数，检查 allProductsDummy 的状态值是否已更改。

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

现在上面的内容适用于大多数基元（字符串、数字、布尔值），但不适用于对象，因为在 javascript 中 {a:1, b:2} !== {a:1, b:2} 会评估为真，因此您可能需要单独采取通过导入 _lodash 或创建您自己的辅助函数来关注对象相等性。

如果状态被异步函数在 preact 或 react 中更改，如何获得通知

How to get notified if a state is changed by an asynchronous function in preact or react

javascript

reactjs

preact