Question

我有一个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（）时，它将在加载数据时显示数据，该怎么做？

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

Answer 1

方法1

正如@Alexander在他的评论中正确指出的那样，“订阅”您正在谈论的特定状态更改的最好方法是完成axios api调用并将其设置为state。 / p>

this.setState()需要第二个arg，这是在设置状态后立即调用的回调。

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或创建自己的帮助函数。

如何在异步或响应中通过异步功能更改状态，如何获得通知

1 个答案: