React中for循环内无法正确更新useState数组变量的问题

问题核心原因 #

这是因为React的useState更新是异步的，且受闭包特性影响。当你在循环里直接用当前的words状态拼接新数组时，每一次调用setWords捕获到的words都是循环启动时的旧值。比如初始words是空数组，第一次循环添加单词A时，你写setWords([...words, A])，此时words还是空数组，更新后变成[A]；但第二次循环添加单词B时，捕获到的words依然是空数组，更新后变成[B]，直接覆盖了之前的[A]。循环结束后，只有最后一次的更新会生效。

解决方法 #

你需要用函数式更新的方式调用setWords——给setWords传一个函数，这个函数会接收当前最新的状态值作为参数，返回新状态。这样每一次更新都会基于上一次的最新结果，不会被闭包的旧值干扰。

方式一：循环中逐个函数式更新 #

const handleWordSubmit = (e) => {
  e.preventDefault();
  const inputVal = e.target.querySelector('input').value.trim();
  if (!inputVal) return;

  const wordList = inputVal.split(',').map(word => word.trim()).filter(Boolean);
  
  wordList.forEach(word => {
    // 用prevWords获取最新状态
    setWords(prevWords => [...prevWords, word]);
    console.log(word); // 此时打印的每个单词都会被正确加入数组
  });

  e.target.querySelector('input').value = '';
};

方式二：一次性合并所有新单词（更高效） #

如果不需要逐个打印，更推荐先把所有要添加的单词处理好，一次性更新状态，减少状态更新次数：

const handleWordSubmit = (e) => {
  e.preventDefault();
  const inputVal = e.target.querySelector('input').value.trim();
  if (!inputVal) return;

  const wordList = inputVal.split(',').map(word => word.trim()).filter(Boolean);
  
  // 一次性合并旧数组和新单词数组
  setWords(prevWords => [...prevWords, ...wordList]);
  
  wordList.forEach(word => console.log(word));
  e.target.querySelector('input').value = '';
};

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