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

我有一个带有HTML元素的子组件，该元素在单击时触发来自其父函数的回调。然后回调会更改父组件中的状态。然后将更改的状态发送回父级，该父级在下面的if语句的条件中使用<代码>切换，来自父级的道具，然后发送更改存储中值的操作。但是，此分派最终会更改存储，从而更改父组件中的一个道具，该道具也会传递给子组件

因此，当我将其插入到代码中时，会得到一个无限循环

  /* 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

（或一些React API）中抛出if语句，在确保父级状态的更改完成后，我可以在其中执行if语句（而不是将其与

onClick

函数调用放在一起）

---

我只想在点击后触发上述事件一次。我不想让它无限循环。我该怎么做？

是您的

切换开关在状态更改后更改状态导致循环，而不是点击

您应该能够在onClick进行状态更改的同一点修改影响
切换逻辑的状态属性

执行此操作时，
state
将已正确设置其属性，您只需执行
toggle（）
的非状态相关行为

我不希望它无限循环，我怎么能做到

通过将
props
中的值与
nextrops
中的值进行比较。因此，您只需在需要时进行切换。在不了解当前逻辑的情况下，很难提供准确的代码

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

另外，您可能希望在
组件内部执行此操作，而将接收props
，因此在切换发生之前，您可能不会进行渲染。
但是在
onClick中触发的函数也是回调（prop）这会改变父级中的状态。因此，我不确定React是否会中断onClick并继续回调，或者它是否会在onClick中完成其余的代码（如果我将代码与onClick放在一起）。单击
onClick
可以更改状态。此时，可能还可以添加
toggle（）
中包含的
状态
更改（因为该逻辑也依赖于
状态）。因此，当调用toggle时，不会导致另一个
状态
更改并中断无限循环。