Question

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

但是，当我点击<Link>时，componentDidMount()未被调用，我无法使用更新的URL参数进行API调用。

所以我尝试将API调用放在componentDidUpdate()和componentWillReceiveProps()

中

这导致堆栈溢出，因为API调用设置状态触发componentDidUpdate()和componentWillReceiveProps()，这再次使API调用导致无限循环。

我如何克服这个问题？

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

Answer 1

在组件内部，我有一个指向具有不同URL参数的相同组件

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

API调用设置状态触发componentDidUpdate（）和componentWillReceiveProps（）再次使API调用导致无限循环

您应该在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（）{<---并在此处调用api}

在componentDidUpdate和componentWillReceiveProps中调用API

3 个答案: