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

Question

我有一个带有HTML元素的子组件,它在单击时从它的父函数触发回调.然后,回调会更改父组件中的状态.然后将更改后的状态发送回父级,该父级在以下if语句的条件中使用.toggle来自父级的prop,然后调度一个更改商店中值的操作.但是,此调度最终会更改存储,从而更改父组件中的一个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语句的父状态中的字段,所以我必须抛出if语句componentWillUpdate(或者一些React API,我可以执行if语句,一旦我确定改变了父级的状态是完整的(而不是使用onClick函数调用).

我想在点击后只触发一次上面的内容.我不希望它无限循环.我怎样才能做到这一点？

Answer 1

我不希望它无限循环.我怎样才能做到这一点？

通过比较值props来nextProps.因此,您只需在需要时切换.在不知道当前逻辑的情况下很难提供准确的代码.

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

此外,您可能希望在内部执行此操作componentWillReceiveProps,因此在切换发生之前,您无法进行渲染.