React状态更新触发无限循环问题求助

问题根源 #

你的无限循环是因为componentDidUpdate的条件判断逻辑有漏洞：

1. 每次调用grupoDeVendaCheck()更新tableData后，组件会重新触发componentDidUpdate
2. 此时prevState.prazoAdic仍然是数字类型，else if (typeof prevState.prazoAdic === "number")的条件始终成立，导致反复调用grupoDeVendaCheck()，反复执行setState({ tableData: newObj })，形成死循环
3. 另外第一个if条件的判断逻辑也有误：你应该对比当前props和上一轮props的差异，而不是用prevProps和prevState比，这样才能正确捕获外部props的变化。

修复方案 #

1. 修正componentDidUpdate的条件判断逻辑 #

调整判断逻辑，确保只有当prazoAdicCad/prazoMedio props变化，或者dropdown.current变化时，才重新计算并更新tableData，避免无意义的重复执行：

componentDidUpdate(prevProps, prevState) {
  // 检测props是否变化，同步到state
  const prazoAdicChanged = prevProps.form.prazoAdicCad !== this.props.form.prazoAdicCad;
  const prazoMedioChanged = prevProps.form.prazoMedio !== this.props.form.prazoMedio;
  const dropdownChanged = prevProps.dropdown.current !== this.props.dropdown.current;

  if (prazoAdicChanged || prazoMedioChanged) {
    this.setState({
      prazoAdic: this.props.form.prazoAdicCad,
      prazoMedio: this.props.form.prazoMedio
    });
  }

  // 只有当核心依赖项变化时，才触发数据计算
  if (prazoMedioChanged || dropdownChanged || (typeof this.state.prazoAdic === "number" && typeof prevState.prazoAdic !== "number")) {
    this.grupoDeVendaCheck();
  }
}

2. 优化grupoDeVendaCheck，避免不必要的setState #

在更新tableData前，先对比新生成的newObj和当前tableData是否一致，只有当数据确实变化时才执行setState，减少不必要的组件更新：

grupoDeVendaCheck = () => {
  const { current } = this.props.dropdown;
  const { prazoMedio } = this.state;

  const newPrazo = current.products.map((item) => ({
    ...item,
    sf_prazo1__c: parseInt(item.sf_prazo1__c || 0) + prazoMedio,
  }));

  const newObj = Object.values(
    newPrazo.reduce((acc, el) => {
      const key = el.grupoVendas + "_" + el.sf_prazo1__c;
      if (!acc[key])
        acc[key] = {
          group: el.grupoVendas,
          term: el.sf_prazo1__c,
          value: 0,
        };
      const bruto = el.sf_quantity * el.sf_sum_of_pairs__c * el.sf_list_price;
      acc[key].value += bruto;

      return acc;
    }, {})
  );

  // 对比新旧数据，仅在变化时更新状态
  const dataChanged = JSON.stringify(newObj) !== JSON.stringify(this.state.tableData);
  if (dataChanged) {
    this.setState({ tableData: newObj });
  }

  console.log(newObj, "object");
};

额外建议 #

如果项目允许，建议用React Hooks（useState/useEffect）重写组件，函数式组件的副作用处理逻辑更直观，能更轻松地避免这类生命周期循环问题。

内容的提问来源于stack exchange，提问作者Caio b .