Reactjs 如何阻止componentDidUpdate创建无限循环

我是react的新手。在我的程序中，每次我在componentDidUpdate（）中设置ajax请求并设置新状态时，它都会创建一个无限循环。还有一件事“这是在componentDidmount（）和componentDidUpdate（）中调用ajax的正确方法吗？”

这是我的处理函数

componentDidUpdate() {
  this.getUnitsHandler();
}

componentDidMount() {
  this.getUnitsHandler();
}

getUnitsHandler = () => {
  Axios.get('http://localhost:4000/getUnit').then(response => {
    this.setState({
      units: response.data
    })

  }).catch(err => {
    console.log(err);
  })
}

---

停止无限循环的逻辑应该是什么？

通常您需要检查道具是否更改，然后才进行更新：

componentDidUpdate(prevProps) {
  if (prevProps[someKey] !== this.props[someKey]) {
    this.getUnitsHandler();
  }
}

但是，在本例中，您没有使用任何实例变量来进行api调用，因此根本不需要使用

componentdiddupdate

将api调用添加到

componentDidMount

将在安装组件后发出请求，查看代码就足够了

有用链接：

---

通常，您需要检查道具是否更改，然后才进行更新：

componentDidUpdate(prevProps) {
  if (prevProps[someKey] !== this.props[someKey]) {
    this.getUnitsHandler();
  }
}

但是，在本例中，您没有使用任何实例变量来进行api调用，因此根本不需要使用

componentdiddupdate

将api调用添加到

componentDidMount

将在安装组件后发出请求，查看代码就足够了

有用链接：

---

最好在componentDidMount（）方法中编写ajax调用，因为它在呈现dom后执行，在加载组件时只执行一次，但如果您尝试更新组件，则每次更新dom时都会执行componentDidUpdate。 因此，进行ajax调用的最佳方法是componentDidMount方法。

---

在react doc中，最好在componentDidMount（）方法中编写ajax调用，因为它在呈现dom后执行，在加载组件时只执行一次，但是如果您尝试更新组件，那么每次更新dom时都会执行componentdiddupdate。 因此，进行ajax调用的最佳方法是componentDidMount方法。

---

从react doc中，您不应该在componentDidUpdate中执行setState，因为setState会再次触发该确切方法。你到底想要实现什么？当组件已安装时，是否执行单个API调用？如果是这样，请在componentDidMount中使用它。

您不应该在componentDidUpdate中执行setState，因为setState会再次触发该方法。你到底想要实现什么？当组件已安装时，是否执行单个API调用？如果是这样，请在componentDidMount中使用它。

您可以在componentDidUpdate（）中立即调用setState（），但请注意，它必须包装在如下条件中：

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

否则会导致无限循环。这还会导致额外的重新渲染，虽然用户看不到，但会影响组件性能。如果你试图将某个状态“镜像”到上面的道具，那么直接考虑使用支柱。

如果您仅使用状态，则可以从componentDidUpdate回调中捕获以前的状态。

您可以在componentDidUpdate（）中立即调用setState（），但请注意，它必须包装在如下条件中：

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

否则会导致无限循环。这还会导致额外的重新渲染，虽然用户看不到，但会影响组件性能。如果你试图将某个状态“镜像”到上面的道具，那么直接考虑使用支柱。

---

如果您仅使用状态，则可以从componentDidUpdate回调中捕获以前的状态。

该api调用从数据库表中获取所有数据。我希望在每次添加新数据时，api调用都会触发并为我获取新数据。该api调用将从数据库表中获取所有数据。我希望在每次添加新数据时，api调用都会触发并为我获取新数据。