React：如何实现setNumber()函数的状态条件赋值与重置逻辑？

没问题，我来帮你搞定这个需求！先理清楚咱们要实现的核心逻辑：

• 当调用setNumber(value)时，先遍历num1到num5，如果发现某个状态的值和传入的value相等，就把这个状态设为0，结束流程；
• 如果遍历完所有状态都没有找到和value相等的，就再从头找第一个值为0的状态，把value赋值给它，然后终止。

接下来是具体的代码实现，直接写在你的React组件里就行：

setNumber = (value) => {
  this.setState(prevState => {
    // 先检查是否有状态和传入值相等，有的话设为0
    for (let i = 1; i <= 5; i++) {
      const key = `num${i}`;
      if (prevState[key] === value) {
        return { [key]: 0 };
      }
    }

    // 如果没有相等的，找第一个为0的状态赋值
    for (let i = 1; i <= 5; i++) {
      const key = `num${i}`;
      if (prevState[key] === 0) {
        return { [key]: value };
      }
    }

    // 如果所有状态都不为0且没有相等值，就不修改状态（可选，根据需求调整）
    return prevState;
  });
}

代码解释： #

• 我们使用this.setState的函数式更新方式，因为要基于之前的状态(prevState)来做判断，这样能避免状态更新的异步问题导致的错误；
• 第一个循环遍历num1到num5，一旦找到和传入value相等的状态，就返回修改该状态为0的对象，此时setState会执行这个修改，流程终止；
• 如果第一个循环没找到相等的值，就进入第二个循环，找到第一个值为0的状态，把value赋值给它，然后返回修改对象；
• 最后如果所有状态都不为0且没有和value相等的，就返回原状态，不做任何修改（这一步可以根据你的实际需求调整，比如提示用户或者做其他处理）。

如果你需要调整逻辑顺序（比如先找0赋值再处理相等的情况），只需要把两个循环的顺序调换就行，但根据你描述的需求，先处理相等值的场景更合理哦。

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