如何基于Local Storage设置状态并通过React Context获取最新darkmode状态

一、解决 Local Storage 状态被初始值覆盖的问题 #

你之前的代码先将状态初始化为false，再通过useEffect读取 Local Storage 更新状态，这会导致组件初始渲染时使用默认值，之后才更新为 Local Storage 的值，出现“初始状态覆盖”的问题。

正确做法：直接在useState的初始函数中读取 Local Storage
useState支持传入一个函数作为初始值，这个函数只会在组件首次渲染时执行一次，我们可以在这里直接读取 Local Storage 的值，让状态从一开始就和 Local Storage 保持一致：

修改Context.js中的状态初始化代码：

import { useState, useEffect, createContext } from "react";

const Context = createContext();

function ContextProvider({ children }) {
  // 从Local Storage读取初始值，不存在则用false
  const [darkmode, setDarkmode] = useState(() => {
    const storedDarkmode = localStorage.getItem("darkmode");
    return storedDarkmode ? JSON.parse(storedDarkmode) : false;
  });

  // 只保留监听darkmode变化、同步到Local Storage的useEffect
  useEffect(() => {
    localStorage.setItem("darkmode", JSON.stringify(darkmode));
  }, [darkmode]);

  const toggleDarkmode = () => {
    setDarkmode((prev) => !prev);
  };

  return (
    <Context.Provider
      value={{
        darkmode,
        toggleDarkmode,
      }}
    >
      {children}
    </Context.Provider>
  );
}

export { ContextProvider, Context };

这样组件首次渲染时，状态就会直接使用 Local Storage 里的darkmode值，不会出现初始值覆盖的情况。

二、解决 useContext 获取不到最新状态的问题 #

你在App.tsx中使用的useEffect依赖为空数组，只会在组件挂载时执行一次。而原来的代码中，Context 的状态是在挂载后通过useEffect才更新的，所以此时打印的是初始的false。

修改方案：将darkmode加入useEffect的依赖数组
让useEffect监听darkmode的变化，每当状态更新时就重新执行，这样就能打印出最新的状态值：

修改App.tsx的代码：

const { darkmode } = useContext(Context);

React.useEffect(() => {
  console.log(darkmode);
}, [darkmode]); // 添加darkmode到依赖列表

现在当 Context 中的darkmode状态更新（包括从 Local Storage 读取到正确值时），这个useEffect就会触发，控制台会打印出最新的状态。

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