反应永远更新循环componentDidUpdate

Question

根据文档：

使用此机会在组件更新后在DOM上进行操作。只要您将当前道具与以前的道具进行比较，这也是进行网络请求的好地方（例如，如果道具未更改，则可能不需要网络请求）。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

现在我的方法如下：

componentDidUpdate(prevProps) {
    console.log("Fitting update");
    this.getDataBasedOnMessurements();
}

getDataBasedOnMessurements() {
    fetch(process.env.REACT_APP_API_URL + 'configurator/getFittingData', {
        method: 'PUT',
        body: JSON.stringify(this.props.messurements)
    }).then((response) => {
        return response.json();
    }).then((myJson) => {
        this.setState({data: myJson.fittingExtra})
    });
};

问题在于，由于状态正在更新，ComponentDidUpdate现在处于永远循环中

那么在更新组件上的道具时调用API和更新状态的正确方法是什么？

Answer 1

在此代码中，getDataBasedOnMessurements代码中没有条件，因此每次更新道具都会调用componentDidUpdate函数。您必须比较道具以获取要触发api调用的特定情况。

Answer 2

调用API的正确位置在componentDidMount（）中，而更新状态在componentDidUpdate中。

但是正如我所看到的，您没有使用任何reducer或调度任何函数。您在获得响应后直接设置数据，而不是更新道具。因此，您可以删除componentDidUpdate（）方法，而只需在componentDidMount（）中调用API

请检查此代码，

componentDidMount() {
    this.getDataBasedOnMessurements();
}

getDataBasedOnMessurements() {
    fetch(process.env.REACT_APP_API_URL + 'configurator/getFittingData', {
        method: 'PUT',
        body: JSON.stringify(this.props.messurements)
    }).then((response) => {
        return response.json();
    }).then((myJson) => {
        this.setState({data: myJson.fittingExtra})
    });
};

Answer 3

您应该添加条件来停止其中的无限循环。在这种情况下，我认为您是否要拨打电话取决于this.props.messurements。

以下示例摘自基于您提供给我们的代码段根据需要调整的官方React文档。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.messurements !== prevProps.messurements) {
    this.getDataBasedOnMessurements();
  }
}