如何避免React Switch按钮及关联文本框在页面跳转返回后重渲染并重置状态

嘿，这个问题我之前也碰到过！核心原因是React组件卸载后，useState里的状态只存在内存中，当你跳转页面再返回时，组件会重新挂载，状态自然就回到初始值了。下面给你两个实用的解决方案：

方案一：用localStorage持久化状态（简单场景首选） #

这是最直接的办法，把状态存在浏览器的本地存储里，组件重新挂载时从这里读取初始值，更新状态时同步保存。

修改后的代码： #

import { useState } from 'react';
import Switch from '@mui/material/Switch';
import Autocomplete from '@mui/material/Autocomplete';

const YourComponent = () => {
  // 从localStorage读取初始状态，没有则用默认值
  const [openSwitch, setOpenSwitch] = useState(() => {
    const saved = localStorage.getItem('openSwitch');
    return saved ? JSON.parse(saved) : { checkedA: true, checkedB: false };
  });
  
  const [disable, setDisable] = useState(() => {
    const saved = localStorage.getItem('textFieldDisable');
    return saved ? JSON.parse(saved) : true;
  });

  const switchHandler = (event) => {
    const newSwitchState = {...openSwitch, [event.target.name]: event.target.checked};
    const newDisableState = !disable;
    
    setOpenSwitch(newSwitchState);
    setDisable(newDisableState);
    
    // 同步保存到localStorage
    localStorage.setItem('openSwitch', JSON.stringify(newSwitchState));
    localStorage.setItem('textFieldDisable', JSON.stringify(newDisableState));
  };

  return (
    <div>
      <Switch 
        checked={openSwitch.checkedB} 
        onChange={switchHandler} 
        color="primary" 
        name="checkedB" 
        inputProps={{'aria-label': 'primary checkbox'}} 
      />
      <Autocomplete disabled={disable} />
    </div>
  );
};

export default YourComponent;

关键说明： #

• 初始化useState时用函数式初始值，避免每次渲染都重复读取localStorage，提升性能。
• localStorage只能存储字符串，所以用JSON.stringify把对象/布尔值转成字符串，读取时用JSON.parse转回原类型。
• 如果希望关闭浏览器后状态自动重置，可以用sessionStorage代替localStorage，两者用法完全一致。

方案二：全局状态管理（复杂场景推荐） #

如果你的应用有多个组件需要共享这个状态，或者有更多类似的持久化需求，用React Context或者Redux这类全局状态管理工具会更合适。状态会保存在全局上下文里，不受组件挂载/卸载影响。

简单的Context示例： #

1. 创建一个全局状态Context：

// SwitchContext.js
import { createContext, useState, useContext, useEffect } from 'react';

const SwitchContext = createContext();

export const SwitchProvider = ({ children }) => {
  const [openSwitch, setOpenSwitch] = useState(() => {
    const saved = localStorage.getItem('openSwitch');
    return saved ? JSON.parse(saved) : { checkedA: true, checkedB: false };
  });
  
  const [disable, setDisable] = useState(() => {
    const saved = localStorage.getItem('textFieldDisable');
    return saved ? JSON.parse(saved) : true;
  });

  useEffect(() => {
    // 状态变化时自动保存到localStorage
    localStorage.setItem('openSwitch', JSON.stringify(openSwitch));
    localStorage.setItem('textFieldDisable', JSON.stringify(disable));
  }, [openSwitch, disable]);

  const switchHandler = (event) => {
    setOpenSwitch(prev => ({...prev, [event.target.name]: event.target.checked}));
    setDisable(prev => !prev);
  };

  return (
    <SwitchContext.Provider value={{ openSwitch, disable, switchHandler }}>
      {children}
    </SwitchContext.Provider>
  );
};

export const useSwitch = () => useContext(SwitchContext);

2. 在你的组件中使用：

import { useSwitch } from './SwitchContext';
import Switch from '@mui/material/Switch';
import Autocomplete from '@mui/material/Autocomplete';

const YourComponent = () => {
  const { openSwitch, disable, switchHandler } = useSwitch();

  return (
    <div>
      <Switch 
        checked={openSwitch.checkedB} 
        onChange={switchHandler} 
        color="primary" 
        name="checkedB" 
        inputProps={{'aria-label': 'primary checkbox'}} 
      />
      <Autocomplete disabled={disable} />
    </div>
  );
};

export default YourComponent;

3. 记得在根组件中包裹SwitchProvider：

import { SwitchProvider } from './SwitchContext';

function App() {
  return (
    <SwitchProvider>
      {/* 你的路由和其他组件 */}
    </SwitchProvider>
  );
}

这种方式的好处是，任何组件只要通过useSwitch钩子就能访问和修改状态，不用重复写localStorage的逻辑，适合复杂应用。

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