React中useState数组意外变为数组长度的问题求助

核心问题：Array.push()的返回值导致状态错误 #

你代码里的关键错误在这里：

setProblemSet(problemSet.push(newProblemSet[i]))

Array.push()方法的返回值是数组的新长度，而非修改后的数组本身。所以每次调用这个setState，你都是把problemSet状态设置成了一个数字（数组长度），而不是数组对象，这就是为什么打印出来是长度而非数组内容。

另外，直接调用problemSet.push()还违反了React的状态不可变原则——永远不要直接修改state变量，必须通过setter函数更新。

额外问题：循环调用setState的异步陷阱 #

即使push()返回的是数组，循环里多次调用setProblemSet也会出问题：React的setState是异步的，循环中每次获取的problemSet都是初始的旧值，最终只会保留最后一次的修改结果，无法正确累加数组。

解决方案 #

1. 一次性设置完整数组 #

既然你已经生成了完整的newProblemSet数组，完全不需要循环调用setState，直接把整个数组设置为状态即可：

// 替换原来的循环setState代码
setProblemSet([...newProblemSet]); // 用展开运算符拷贝数组，保证状态不可变性

如果不需要额外拷贝，也可以直接写setProblemSet(newProblemSet)，但拷贝能避免后续意外修改原数组影响状态。

2. 修复lightUp函数的闭包问题 #

因为setState是异步的，你在setProblemSet后立刻调用lightUp()，此时函数里的problemSet还是旧值（空数组）。需要用useEffect监听problemSet的变化，当状态更新后再执行lightUp：

// 在组件内添加这个useEffect
useEffect(() => {
  // 当problemSet有内容且problem为false时执行lightUp
  if (problemSet.length > 0 && !problem) {
    lightUp();
  }
}, [problemSet, problem]); // 依赖项：当这两个状态变化时触发

// 移除原来在if(problem)块里的lightUp()调用

3. 优化随机数组生成（可选） #

你原来的随机唯一数组生成逻辑可以简化，用Set来保证唯一性更高效：

let newProblemSet = [];
const usedNumbers = new Set();
while (newProblemSet.length < level) {
  const randomCell = Math.floor(Math.random() * 9) + 1;
  if (!usedNumbers.has(randomCell)) {
    usedNumbers.add(randomCell);
    newProblemSet.push(randomCell);
  }
}

修改后的关键代码片段 #

// 组件内的useEffect新增
useEffect(() => {
  if (problemSet.length > 0 && !problem) {
    lightUp();
  }
}, [problemSet, problem]);

// 生成problemSet的代码块修改
if (problem){
  let newProblemSet = [];
  const usedNumbers = new Set();
  while (newProblemSet.length < level) {
    const randomCell = Math.floor(Math.random() * 9) + 1;
    if (!usedNumbers.has(randomCell)) {
      usedNumbers.add(randomCell);
      newProblemSet.push(randomCell);
    }
  }

  setProblemSet([...newProblemSet]);
  setProblem(false);
  // 移除原来的lightUp()调用
}

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