使用自定义Hook时React应用无法重新渲染问题求助

我帮你梳理下这个问题的核心原因和解决办法——其实问题出在React状态更新的不可变性原则上，和你的自定义Hook本身关系不大。

问题根源 #

React的useState是通过检测状态的引用是否发生变化来触发组件重渲染的。你的自定义Hook逻辑本身没问题，但如果在Signin组件里是这样更新状态的：

// 错误示例：直接修改原对象，引用未改变
appState.screen = "hub";
setAppState(appState);

这种情况下，你传给setValue的还是原来的对象引用，React会认为状态没有发生变化，自然不会触发App组件的重渲染，也就始终停留在Signin组件。

虽然你能通过JSON.stringify看到状态内容变了，但这只是对象属性值的变化，对象本身的引用还是同一个，React的状态检测机制识别不到这个变更。

解决方案 #

你需要在更新状态时创建全新的对象，确保引用发生变化，具体有两种推荐方式：

方式1：使用展开运算符创建新对象 #

在Signin组件里调用setAppState时，通过展开运算符复制原状态的所有属性，再覆盖需要修改的部分：

setAppState({
  ...appState, // 复制原状态的所有属性
  screen: "hub" // 覆盖目标属性
});

方式2：函数式更新（更推荐） #

如果你的更新逻辑依赖之前的状态值，用函数式更新能避免闭包问题，更安全可靠：

setAppState(prevState => ({
  ...prevState,
  screen: "hub"
}));

额外优化建议 #

1. 给renderApp函数添加默认返回，避免没有匹配到screen值时页面空白：

const renderApp = () => {
  if (appState.screen === "signin") return <Signin />;
  if (appState.screen === "hub") return <Hub />;
  // 默认回到登录页或显示错误页面
  return <Signin />;
};

2. 优化自定义Hook的鲁棒性，加入错误处理和依赖补全：

const useStateWithSessionStorage = (localStorageKey) => {
  // 用函数式初始值，避免每次渲染都执行JSON.parse
  const initialValue = () => {
    try {
      const stored = sessionStorage.getItem(localStorageKey);
      return stored ? JSON.parse(stored) : {
        screen: "signin",
        loading: false,
        user: null,
        response: null,
      };
    } catch (e) {
      console.error("解析sessionStorage失败:", e);
      return {
        screen: "signin",
        loading: false,
        user: null,
        response: null,
      };
    }
  };

  const [value, setValue] = React.useState(initialValue());
  
  // 补全localStorageKey到依赖数组，符合hooks规范
  React.useEffect(() => {
    sessionStorage.setItem(localStorageKey, JSON.stringify(value));
  }, [value, localStorageKey]);
  
  return [value, setValue];
};

验证方法 #

修改完状态更新方式后，你可以在App组件里加个日志，确认重渲染是否触发：

export default function App() {
  const [appState, setAppState] = useStateWithSessionStorage("appState");
  
  console.log("App当前screen:", appState.screen); // 新增日志
  
  const renderApp = () => {
    if (appState.screen === "signin") return <Signin />;
    if (appState.screen === "hub") return <Hub />;
    return <Signin />;
  };
  return <div className="App">{renderApp()}</div>;
}

当你在Signin组件触发状态更新后，如果控制台打印出hub，说明重渲染已经触发，组件会自动切换到Hub。

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