React JS数组状态未追加新值反而持续重置问题求助

问题根源 #

你的代码出现此问题是因为闭包陷阱：useEffect 传入空依赖数组 []，导致 keyDownListener 函数仅在组件首次渲染时创建一次，它捕获的 inputArray 始终是初始状态（仅包含初始字符串的数组）。每次按键触发时，都是基于这个初始数组添加新按键，覆盖了之前的状态，所以最终只会显示最后一次按下的按键。

修复后的代码 #

function App() {
  const [inputArray, setInputArray] = useState(["After me should be a list of keys: "]);

  function keyDownListener(e){
    // 使用函数式更新获取最新状态
    setInputArray(prevArray => {
      const clonedArray = [...prevArray];
      clonedArray.push(e.key);
      return clonedArray;
    });
  }
 
  useEffect(() => {
    document.addEventListener('keydown', keyDownListener);
    // 添加清理函数，组件卸载时移除事件监听
    return () => {
      document.removeEventListener('keydown', keyDownListener);
    };
  }, []); // 空依赖数组依然可用，因为我们用了函数式更新

  return (
    <div className='app' >
      {inputArray}
    </div>
  );
}

关键改动说明 #

1. 函数式更新状态：setInputArray(prevArray => ...) 形式会接收当前最新的状态值 prevArray，确保每次更新都是基于最新数组进行追加操作，避免闭包导致的过期状态问题。
2. 清理事件监听：在 useEffect 的返回函数中移除事件监听，防止组件卸载后仍存在监听导致的内存泄漏。

修改后，每次按键都会正确追加到数组末尾，页面会显示类似 After me should be a list of keys: AltAltAltAlt 的效果。

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