javascript - 如何防止 componentWillUpdate 导致无限循环？

Question

这个问题已经有答案了:

Why does componentDidUpdate() create an infinite loop? (1 个回答)

已关闭 3 年前。

我有一个带有 HTML 元素的子组件，该元素在单击时会触发其父函数的回调。然后回调会更改父组件中的状态。然后，更改后的状态被发送回父级，该父级在下面的 if 语句的条件中使用。 toggle ，来自父级的 prop，然后调度一个更改存储中值的操作。但是，此调度最终会更改 store，从而更改父组件中的 props 之一，该 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 语句(或者一些 React API，一旦我确定对父状态的更改已完成，我就可以执行 if 语句(而不是将其与 onClick 函数调用放在一起)。

我只想在单击后触发上述一次。我不希望它无限循环。我怎样才能做到这一点？

Answer 1

I don't want it to loop infinitely. How can I do this?

通过将 props 中的值与 nextProps 进行比较。因此，您只需在需要时进行切换。如果不知道您当前的逻辑，很难提供准确的代码。

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

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