具有两个setStates的if...else会导致无限循环

。这是因为在React中，每次调用setState都会触发组件的重新渲染。当在if...else语句中使用两个setStates时，无论条件是什么，都会导致至少一个setState被调用，从而触发重新渲染。然后，由于重新渲染，if...else语句会再次运行，再次调用setState，导致又一次重新渲染，如此循环下去，导致无限循环。

解决这个问题的方法是使用其他方式来更新组件的状态，而不是在if...else语句中使用多个setStates。一种常见的方法是使用单个setState，并在其中更新所有需要更新的状态。另一种方法是使用函数形式的setState，该函数接收先前的状态作为参数，并返回新的状态。这样可以确保每次更新都是基于先前的状态进行的，而不会导致无限循环。

以下是一个示例代码，展示了如何解决具有两个setStates的if...else导致无限循环的问题：

// 初始化状态
state = {
  condition: false,
  count: 0
};

// 处理条件变化的函数
handleConditionChange = () => {
  // 更新条件状态
  this.setState(prevState => ({
    condition: !prevState.condition
  }));

  // 更新计数状态
  this.setState(prevState => ({
    count: prevState.count + 1
  }));
};

// 渲染函数
render() {
  const { condition, count } = this.state;

  if (condition) {
    // 条件为真时的处理逻辑
    return (
      <div>
        <p>条件为真</p>
        <p>计数: {count}</p>
        <button onClick={this.handleConditionChange}>改变条件</button>
      </div>
    );
  } else {
    // 条件为假时的处理逻辑
    return (
      <div>
        <p>条件为假</p>
        <p>计数: {count}</p>
        <button onClick={this.handleConditionChange}>改变条件</button>
      </div>
    );
  }
}

在上述示例中，我们使用了单个setState，并在其中更新了两个状态。这样可以避免无限循环的问题，并正确地更新组件的状态。