React中setState结合componentDidUpdate触发无限循环错误的解决求助

问题根源 #

你遇到的无限循环，核心原因是componentDidUpdate里的对象引用判断逻辑失效：

• 每次调用setState更新inputs时，数组内的对象都会被重新创建（通过展开运算符...input生成新对象）
• 你用destinationInput !== prevDestinationInput比较两个对象的引用，这个条件永远为true，导致每次组件更新都会触发setState，进而再次触发componentDidUpdate，形成循环

修复方案 #

1. 修正componentDidUpdate的判断逻辑 #

不要直接比较对象引用，而是检查具体需要更新的状态是否已经满足，只有当状态未达到目标时才执行更新：

componentDidUpdate(prevProps, prevState) {
  const destinationInput = this.state.inputs.find(input => input.id === "destination");
  
  // 判断三个值是否都已填充，且当前未标记为已设置（避免重复更新）
  const allValuesFilled = destinationInput.value !== "" && destinationInput.value1 !== "" && destinationInput.value2 !== "";
  const needsUpdate = allValuesFilled && !destinationInput.isSet;

  if (needsUpdate) {
    const destinationIndex = this.state.inputs.findIndex(input => input.id === "destination");
    const updatedInputs = this.state.inputs.map((input, index) => {
      if (index === destinationIndex) {
        return {...input, isSet: true, info: false};
      } else if (index === destinationIndex + 1) {
        return {...input, info: true};
      }
      return input;
    });
    this.setState({ inputs: updatedInputs });
  }
}

2. 优化handleDestination的setState调用 #

原代码中多次分开调用setState会触发多次组件更新，建议合并为一次，同时使用prevState确保状态更新的准确性：

handleDestination(name) {
  const destinationPick = this.titleRefs[name];
  const destinationIndex = this.state.inputs.findIndex(input => input.id === "destination");

  if (!destinationPick) return;

  if (destinationPick.classList.contains("border-danger")) {
    // 取消选中逻辑
    destinationPick.classList.remove("border-4", "border-danger");
    
    this.setState(prevState => {
      const updatedInputs = prevState.inputs.map((input, index) => {
        if (index !== destinationIndex) return input;
        
        const { value, value1, value2 } = input;
        switch (name) {
          case value: return {...input, value: ""};
          case value1: return {...input, value1: ""};
          case value2: return {...input, value2: ""};
          default: return input;
        }
      });
      
      return {
        inputs: updatedInputs,
        count: prevState.count - 1
      };
    });
  } else {
    if (this.state.count >= 3) return;
    
    // 选中逻辑
    destinationPick.classList.add("border-4", "border-danger");
    
    this.setState(prevState => {
      const updatedInputs = prevState.inputs.map((input, index) => {
        if (index !== destinationIndex) return input;
        
        let count = 0;
        const { value, value1, value2 } = input;
        if (value !== "") count = 1;
        if (value1 !== "") count = 2;
        
        switch (count) {
          case 0: return {...input, value: name};
          case 1: return {...input, value1: name};
          case 2: return {...input, value2: name};
          default: return input;
        }
      });
      
      return {
        inputs: updatedInputs,
        count: prevState.count + 1
      };
    });
  }
}

额外优化建议：用状态控制DOM样式 #

直接操作DOM的classList会导致状态与DOM不一致，建议通过React状态控制按钮样式：

// 渲染按钮时根据状态判断样式
<button 
  className={`btn ${this.state.inputs.find(i => i.id === "destination").value === name ? "border-4 border-danger" : ""}`}
  onClick={() => this.handleDestination(name)}
>
  {name}
</button>

这样就可以删除handleDestination中操作classList的代码，完全由状态驱动视图，更符合React的设计理念。

内容的提问来源于stack exchange，提问作者Dawid Janas