componentDidUpdate和componentWillReceiveProps中的API调用

Question

我正在使用React推荐的componentDidMount()方法进行API调用。在组件内部，我有一个<Link>，它用不同的URL参数指向相同的组件。

但是，当我单击<Link>时，componentDidMount()不会被调用，并且我不能使用更新的URL参数进行API调用。

因此，我尝试将API调用放在componentDidUpdate()和componentWillReceiveProps()中。

这会导致堆栈溢出，因为应用程序接口调用设置了触发componentDidUpdate()和componentWillReceiveProps()的状态，这再次使应用程序接口调用导致无限循环。

我该如何克服这个问题？

符合React理念的推荐解决方案是什么？

Answer 1

在组件内部，我有一个指向具有不同

参数的相同组件的

这意味着组件不会卸载/重新挂载，因为它是相同的组件，因此不会调用componentDidMount。

应用程序接口调用设置触发componentDidUpdate()和componentWillReceiveProps()的状态，这再次使应用程序接口调用导致无限循环

您应该在componentDidUpdate中进行API调用(componentWillReceiveProps将被弃用，这里无论如何都不应该执行异步调用)，但通过检查API调用返回的数据是否存在或更改来检查它是否已经执行，以避免无限的重新渲染：

componentDidUpdate(prevProps, prevState) {
  if (this.state.data.length === 0) { // or compare with `prevState`
    // make the api call
  }
}

Answer 2

componentDidUpdate()通过使用它接收以前的道具，无论道具是否更新，您都可以...如果更新，则调用API。在我的项目中，我这样做：

componentDidUpdate(prevProps) {
    if (prevProps.match.params.category !== this.props.match.params.category) {
        this.getBlogList(this.props.match.params.category);
    } 
}

Answer 3

移除componentDidUpdate，仅使用componentWillReceiveProps(){ <-并在此处调用接口}