如何防止 componentWillUpdate 导致无限循环？ [复制]答案

【问题标题】：How to keep componentWillUpdate from causing an infinite loop? [duplicate]如何防止 componentWillUpdate 导致无限循环？ [复制]
【发布时间】：2017-02-08 00:17:52
【问题描述】：

我有一个带有 HTML 元素的子组件，该元素在单击时触发其父函数的回调。回调然后更改父组件中的状态。然后将更改的状态发送回父级，该父级在下面的 if 语句的条件中使用。 toggle，来自父级的道具，然后调度一个更改存储中值的操作。然而，这个 dispatch 最终改变了 store，从而改变了父组件中的一个 props，它也被传递给了子组件。

因此，当我将它插入到我的代码中时，我得到了一个无限循环。

  /* no state changes to the current component */
  componentWillUpdate(nextProps) {
    const {
      // ... some props
      toggle, // func
    } = nextProps;

    if (/* case 1 of 2*/)
      toggle(true);
    } else (/* case 2 of 2 */) {
      toggle(false);
    }
  }

因为onClick 触发了一个回调，该回调会更改上面 if 语句所依赖的父状态中的一个字段，所以我必须在 componentWillUpdate 中抛出 if 语句（或一些我可以执行 if 语句的 React API一旦我确定对父状态的更改已完成（而不是将其与onClick 函数调用放在一起）。

我只想在点击后触发一次上述操作。我不希望它无限循环。我该怎么做？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我不希望它无限循环。我该怎么做？

通过比较 props 和 nextProps 中的值。所以你只在需要时才切换。在不了解您当前的逻辑的情况下很难提供准确的代码。

if (this.props.src !== nextProps.src) {
  // toggle logic
}

此外，您可能希望在 componentWillReceiveProps 内部执行此操作，因此您不会在切换发生之前进行渲染。

【讨论】：

【解决方案2】：

这是您的toggle 在状态更改后更改状态导致循环而不是点击。

您应该能够在 onClick 更改其状态的同时修改影响toggle 逻辑的状态属性。

这样做，state 已经将其属性设置正确，您只需执行toggle() 的非状态相关行为。

【讨论】：

但是onClick中触发的函数也是一个回调（一个prop），它改变了parent中的状态。所以，我不确定 React 是否会中断 onClick 并继续回调，或者它是否会完成 onClick 中的其余代码（如果我将代码与 onClick 一起放置）。
onClick 改变状态没关系。此时也许也可以添加包含在toggle() 中的state 更改（因为该逻辑也依赖于state）。因此，当调用切换时，它不会导致另一个 state 更改并打破无限循环。