React中State未更新？原因及解决方法

从现在开始，我们要努力学习啦！今天我给大家带来《React事件中State未更新？原因与解决方法》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

React事件处理函数中的State值未更新：原因与解决方案

在React开发中，我们经常需要在useEffect中使用Socket或其他事件监听器。然而，有时会遇到一个令人困惑的问题：在事件处理函数中访问state时，得到的值并非最新的，而是初始值。本文将深入探讨这个问题的原因，并提供两种有效的解决方案。

问题分析：闭包陷阱

问题的根源在于JavaScript的闭包特性。当我们在useEffect中使用空依赖数组 [] 时，该Effect只会在组件首次渲染后执行一次。此时，Effect内部的事件处理函数会捕获当前state的值。由于Effect只执行一次，因此事件处理函数捕获的state值始终是初始值，即使state在后续发生了更新。

考虑以下代码：

import { useContext, useEffect, useState, useRef } from "react";

export const DashboardNavbar = (props) => {
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);

  console.log("dashboard is rerendering...");

  const showCurrent = () => {
    console.log("showCurrent is running and current = ", current);
  };

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  useEffect(() => {
    socket.on("newNotification", (payload) => {
      showCurrent();
    });
    return () => {
      socket.off("connect");
      socket.off("newNotification");
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <button
        onClick={() => {
          showCurrent();
        }}
      >
        show
      </button>

      <button
        onClick={() => {
          incrementCurent();
        }}
      >
        increment
      </button>
    </>
  );
};
export default DashboardNavbar;

在这个例子中，useEffect 中的 socket.on("newNotification", ...) 使用了 showCurrent 函数，而 showCurrent 函数又读取了 current state。由于 useEffect 依赖数组为空，因此 showCurrent 函数捕获的 current 始终是初始值 0。

解决方案一：将State变量加入依赖数组

最直接的解决方案是将依赖的state变量添加到useEffect的依赖数组中。这样，每次state发生更新时，useEffect都会重新执行，从而确保事件处理函数捕获的是最新的state值。

修改后的代码如下：

useEffect(() => {
  socket.on("newNotification", (payload) => {
    showCurrent();
  });

  return () => {
    socket.off("connect");
    socket.off("newNotification");
  };
}, [current]); // 包含 "current"

这种方法的优点是简单易懂，能够直接解决问题。但需要注意的是，每次current更新，useEffect都会重新执行，导致Socket事件监听器被重新注册和注销。如果频繁更新current，可能会影响性能。

解决方案二：使用useRef引用State值

另一种解决方案是使用useRef来创建一个可变的引用，并在每次state更新时，更新该引用的值。这样，即使useEffect只执行一次，事件处理函数也可以通过引用访问到最新的state值。

修改后的代码如下：

import { useContext, useEffect, useState, useRef } from "react";

export const DashboardNavbar = (props) => {
  const socket = useContext(WebsocketContext);
  const [current, setCurrent] = useState(0);
  const currentRef = useRef(null);

  useEffect(() => {
    currentRef.current = current; // 更新 ref 的值
  }, [current]);

  const showCurrent = () => {
    console.log("showCurrent is running and current = ", currentRef.current);
  };

  useEffect(() => {
    socket.on("newNotification", (payload) => {
      showCurrent();
    });
    return () => {
      socket.off("connect");
      socket.off("newNotification");
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const incrementCurent = () => {
    setCurrent((prev) => prev + 1);
  };

  console.log("dashboard is rerendering...");

  return (
    <>
      <button
        onClick={() => {
          showCurrent();
        }}
      >
        show
      </button>

      <button
        onClick={() => {
          incrementCurent();
        }}
      >
        increment
      </button>
    </>
  );
};
export default DashboardNavbar;

在这个例子中，我们创建了一个currentRef，并在useEffect中每次current更新时，更新currentRef.current的值。这样，showCurrent函数就可以通过currentRef.current访问到最新的current值，而无需将current添加到useEffect的依赖数组中。

这种方法的优点是可以避免useEffect的重复执行，从而提高性能。但需要注意的是，useRef返回的是一个可变对象，需要通过.current属性来访问其值。

总结

在React组件中，当在useEffect中使用Socket事件监听时，如果事件处理函数中访问state时得到的是初始值，很可能是由于闭包陷阱导致的。可以通过将state变量加入useEffect的依赖数组，或者使用useRef来引用最新的state值来解决这个问题。选择哪种方案取决于具体的应用场景。如果state更新不频繁，可以选择第一种方案；如果state更新频繁，建议选择第二种方案，以避免useEffect的重复执行。

好了，本文到此结束，带大家了解了《React中State未更新？原因及解决方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！