React中使用for循环结合useState生成乘法题目数组时始终返回重复结果的问题排查

问题描述 #

我正在开发一个乘法计算练习题，编写了用于生成题目数组的React代码：

const [questionsArray,setQuestionsArray] = useState([]); 
const [multiplyArray, setMultiplyArray] = useState([35]); 
const [multBy, setMultBy] = useState(5); 
function createQuestionsArray() { 
  for (var m = 0; m < multiplyArray.length; m++) { 
    for (var b = 1; b < multBy+1; b++) { 
      var question = multiplyArray[m]+'x'+b; 
      setQuestionsArray((prev) => [...prev, question]); 
    } 
  } 
}

我期望最终得到的questionsArray为[35x1,35x2,35x3,35x4,35x5]，但实际得到的数组元素全是35x5，即[35x5,35x5,35x5,35x5,35x5]，请问该问题的原因是什么？

原因分析 #

这是**var变量的函数级作用域 + React状态更新的异步性**共同导致的问题：

• 你用var声明了循环变量b和m，var的作用域是函数级而非块级——整个循环过程中只有一个b变量存在，每次迭代都会覆盖它的值。
• React的setState是异步操作，你在循环里调用的setQuestionsArray回调不会立即执行，而是被加入到React的更新队列中。当所有循环结束后，这些回调才会依次触发，此时它们引用的b已经是循环的最终值（也就是5），所以所有生成的question都会是35x5。

简单来说：所有setState回调共享同一个b变量，等到回调执行时，b已经走完了整个循环的迭代，自然所有元素都是最后一次循环的值。

解决方案 #

这里有几种简单的修复方式，推荐第一种或第三种：

1. 将var替换为let（最简洁）

let是块级作用域，每次循环迭代都会创建一个全新的b变量，每个setState回调引用的都是当前迭代的b值，不会被后续循环覆盖：

function createQuestionsArray() { 
  for (let m = 0; m < multiplyArray.length; m++) { 
    for (let b = 1; b < multBy+1; b++) { 
      const question = multiplyArray[m]+'x'+b; 
      setQuestionsArray((prev) => [...prev, question]); 
    } 
  } 
}

2. 使用闭包保存当前迭代值（兼容旧环境）

如果需要兼容不支持let的环境，可以用立即执行函数（IIFE）创建闭包，把当前的b值捕获下来：

function createQuestionsArray() { 
  for (var m = 0; m < multiplyArray.length; m++) { 
    for (var b = 1; b < multBy+1; b++) { 
      (function(currentB) {
        var question = multiplyArray[m]+'x'+currentB; 
        setQuestionsArray((prev) => [...prev, question]); 
      })(b);
    } 
  } 
}

3. 先构建完整数组再更新状态（性能更优）

多次调用setState会触发多次组件更新，推荐先把所有题目构建成一个数组，再一次性更新状态，这样更高效：

function createQuestionsArray() { 
  const newQuestions = [];
  for (let m = 0; m < multiplyArray.length; m++) { 
    for (let b = 1; b < multBy+1; b++) { 
      newQuestions.push(`${multiplyArray[m]}x${b}`);
    } 
  }
  setQuestionsArray(newQuestions);
}

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