React - 在 useEffect 内部使用时，useState 不更新答案

【问题标题】：React - useState not updating when used inside of useEffectReact - 在 useEffect 内部使用时，useState 不更新
【发布时间】：2021-12-30 08:59:32
【问题描述】：

在我的项目中，我想将所有console.log 保存在一个数组中。我创建了一个简单的示例来代表我正在尝试做的事情。

一个简单的按钮，按下时会登录到控制台。
所有记录消息的数组
一个覆盖console.log 函数的useEffect 挂钩。

但是，数组不会超过 1 个项目。

代码：

import { useState, useEffect } from "react";

export default function App() {
  const [myLogs, setMyLogs] = useState<any[]>([]);

  useEffect(() => {
    var log = console.log;
    console.log("from useEffect");
    console.log = function () {
      var args = Array.prototype.slice.call(arguments);
      log.apply(this, args);
      setMyLogs({ ...myLogs, ...args });
    };
  }, []);

  return (
    <div>
      <button onClick={() => console.log("clicked :)")}>Click to Log</button>
      <p>{myLogs.toString()}</p>
    </div>
  );
}

Codesanbox link

我尝试将myLogs 添加为useEffect 钩子的依赖项，认为它可能会有所帮助，但它只是创建了一个无限循环。（这部分我明白了）

【问题讨论】：

顺便说一句，在我看来，覆盖全局 console.log 函数来设置 React 组件中的状态并不是一个好主意。您打算这样做有什么特别的原因吗？

标签： react-hooks

【解决方案1】：

您将日志设置为对象，它应该是一个数组。正确的方法如下

setMyLogs((prev) => [ ...prev, ...args ]);

【讨论】：

【解决方案2】：

问题在于初始myLogs 状态的陈旧外壳以及将状态不变量从array 更改为object 类型的问题。

使用功能状态更新从任何先前的状态正确更新，而不是在回调范围内关闭的状态值。保持数组状态不变。

useEffect(() => {
  const log = console.log;
  console.log("from useEffect");
  console.log = function () {
    const args = Array.prototype.slice.call(arguments);
    log.apply(this, args);
    setMyLogs(myLogs => [...myLogs, args]);
    // or [...myLogs, ...args] if you want all the log args flattened
  };
}, []);

【讨论】：