React：useEffect内使用useState更新日志数组仅能保存一条数据的问题求助

嘿，我来帮你搞定这个日志数组只能存一条的问题～

你的代码里有两个核心问题导致了这个现象：

1. 闭包捕获旧值的坑：因为useEffect的依赖数组是空的，它只会在组件第一次挂载时执行一次。这时候重写的console.log函数里捕获到的myLogs是初始的空数组，之后不管你点多少次按钮，这个函数里的myLogs永远都是那组初始的空值——所以每次调用setMyLogs都是用空数组去合并新参数，自然只能保留最后一次的日志内容。
2. 数组更新方式错用：myLogs明明是数组，但你用了对象的展开语法{...myLogs, ...args}，这会把数组转成以索引为键的对象，再赋值给数组状态，虽然React不会报错，但这根本不是正确的数组追加姿势。

最简洁靠谱的修复方式是用函数式更新来修改状态，这样既不用依赖myLogs，也能避开闭包的坑，同时用正确的数组操作来追加日志：

import { useState, useEffect } from "react";
export default function App() {
  const [myLogs, setMyLogs] = useState<any[]>([]);
  useEffect(() => {
    // 先保存原始的console.log方法
    const originalLog = console.log;
    // 重写console.log
    console.log = function () {
      // 把arguments转成数组
      const args = Array.from(arguments);
      // 保留原本的控制台输出行为
      originalLog.apply(this, args);
      // 用函数式更新获取最新状态，追加新日志
      setMyLogs(prevLogs => [...prevLogs, ...args]);
    };

    // 重要：组件卸载时恢复原始的console.log，避免污染全局
    return () => {
      console.log = originalLog;
    };
  }, []); // 依赖数组保持为空，完全不需要加myLogs

  return (
    <div>
      <button onClick={() => console.log("clicked :)")}>Click to Log</button>
      {/* 用join比toString更美观，避免数组默认的逗号分隔带空格问题 */}
      <p>{myLogs.join(', ')}</p>
    </div>
  );
}

关键改进点说明： #

• 函数式更新：setMyLogs(prevLogs => [...prevLogs, ...args])里的prevLogs是React主动传入的当前最新状态值，不管闭包里捕获的旧值是什么，都能拿到最准确的日志数组，然后用数组展开语法把新日志追加进去。
• 正确的数组操作：用[...prevLogs, ...args]来合并数组，保证状态始终是数组类型，不会出现对象转数组的奇怪问题。
• 副作用清理：加了返回函数，组件卸载时把console.log恢复成原来的方法，不然其他组件或者全局环境的console.log会被一直覆盖，这是React副作用的最佳实践哦。

另外你之前把myLogs加到useEffect依赖里导致无限循环，是因为每次myLogs更新都会触发useEffect重新执行，而每次执行又会重写console.log，重写后的函数又会更新myLogs，直接形成了死循环。用函数式更新就彻底避开了这个问题，因为根本不需要依赖myLogs啦～

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