React调用setState赋值数组后立即读取状态为空的问题排查

你遇到的是React状态更新的固有机制，和你的随机选值、数组赋值逻辑无关：

• useState返回的状态setter方法是异步批量触发的，调用setCorrectAnswer不会同步修改当前函数闭包内捕获的correctAnswer变量值。
• 你在set语句下一行打印的correctAnswer，是当前fetchData函数执行时，从组件作用域捕获到的初始状态值——也就是定义状态时传入的空数组[]。此时React还没完成状态更新、组件重渲染的流程，你自然读不到刚设置的新值。
• 你已经验证过push完成后的correctAnswerArray确实包含10个选中元素，说明状态更新的入参是完全正确的，状态本身已经被React接收，只是打印时机不对导致你误以为赋值失败。

不要在调用setter的同步代码里立刻打印状态值，用下面两种方式可以准确拿到更新后的状态：

1. 新增监听correctAnswer变化的useEffect，状态更新完成、组件重渲染后会自动执行回调，此时拿到的就是最新值：

useEffect(() => {
  console.log('更新后的correctAnswer：', correctAnswer);
}, [correctAnswer])

2. 如果只是确认传入setter的内容是否正确，直接打印你传入的correctAnswerArray即可，你代码中已经写了对应的日志，只要这个日志输出的数组内容符合预期，状态更新就不会出错。

你当前的随机选值逻辑存在两个小隐患，可以调整得更稳妥：

• 不要直接调用splice修改axios返回的原响应对象res.data，先做一次浅拷贝再操作，避免意外修改原响应数据引发不可预期的问题。
• 先随机生成下标再取对应元素，替代先随机取元素再用indexOf找下标的写法，既省了遍历查找的性能消耗，也能避免indexOf匹配失败返回-1、导致splice误删数组最后一个元素的边界问题。

优化后的选值逻辑代码：

const res = await axios.get(URL);
// 浅拷贝原数组，不直接修改接口返回的原数据
const countryPool = [...res.data];
const correctAnswerArray = [];

for (let i = 0; i < 10; i++) {
  const randomIdx = Math.floor(Math.random() * countryPool.length);
  const selectedCountry = countryPool[randomIdx];
  countryPool.splice(randomIdx, 1);
  correctAnswerArray.push(selectedCountry);
}

setCorrectAnswer(correctAnswerArray);

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