在React TypeScript函数组件中切换组件时如何保存输入值？

问题根本原因 #

状态丢失是因为当前Comp组件被卸载了：不管是路由切换回退、还是父组件的条件渲染逻辑把Comp从DOM树移除，函数组件的useState状态是绑定在组件实例上的，实例销毁后状态会同步清空，重新挂载时就会回到初始值。

可选解决方案 #

你可以根据自己的业务场景选择对应方案：

方案1：避免组件卸载（适合同级组件切换场景） #

如果你的场景只是当前组件内部切换展示AnotherComponent，不要用条件卸载的逻辑，改成用CSS控制显隐即可，组件不会被卸载，状态自然保留：

const Comp = (): JSX.Element => {
  const [showNext, setShowNext] = useState(false);
  const [data1, setData1] = useState(array);

  return (
    <>
      {/* 用display控制当前组件内容显隐，不卸载组件 */}
      <div style={{ display: showNext ? 'none' : 'block' }}>
        {/* 这里放你原来Comp的UI内容 */}
      </div>
      {showNext && <AnotherComponent />}
    </>
  );
};

方案2：状态提升到上层节点（适合多组件共享状态/跨路由场景） #

把需要保留的状态放到不会被卸载的父组件/公共上层节点中，通过props或者context传递给Comp，就算Comp卸载，状态也会保存在上层节点：

// 父组件代码示例
const Parent = () => {
  // 把状态提到父组件，父组件不会随切换卸载
  const [compState, setCompState] = useState({
    showNext: false,
    data1: array
  });

  return (
    <>
      {compState.showNext ? (
        <AnotherComponent />
      ) : (
        <Comp 
          showNext={compState.showNext}
          setShowNext={(val) => setCompState(prev => ({...prev, showNext: val}))}
          data1={compState.data1}
          setData1={(val) => setCompState(prev => ({...prev, data1: val}))}
        />
      )}
    </>
  )
}

// Comp组件改为接收props
type CompProps = {
  showNext: boolean;
  setShowNext: (val: boolean) => void;
  data1: Array<unknown>; // 替换成你实际的array类型
  setData1: (val: Array<unknown>) => void;
}
const Comp = ({showNext, setShowNext, data1, setData1}: CompProps): JSX.Element => {
  return showNext ? <AnotherComponent /> : <></>;
};

方案3：本地持久化存储（适合刷新页面也需要保留状态的场景） #

如果需要即使刷新页面状态也不丢失，可以把状态序列化后存到localStorage或者sessionStorage里，组件初始化的时候从存储中读取初始值：

const Comp = (): JSX.Element => {
  // 初始化时优先从localStorage读，没有就用默认值array
  const [showNext, setShowNext] = useState(() => {
    const saved = localStorage.getItem('comp_showNext');
    return saved ? JSON.parse(saved) : false;
  });
  const [data1, setData1] = useState(() => {
    const saved = localStorage.getItem('comp_data1');
    return saved ? JSON.parse(saved) : array;
  });

  // 状态变化时同步更新到localStorage
  useEffect(() => {
    localStorage.setItem('comp_showNext', JSON.stringify(showNext));
  }, [showNext]);
  useEffect(() => {
    localStorage.setItem('comp_data1', JSON.stringify(data1));
  }, [data1]);

  return showNext ? <AnotherComponent /> : <></>;
};

注意：如果data1包含函数、Symbol等不可序列化的值，不要用本地存储方案，会导致数据丢失。

方案4：使用状态管理库（适合中大型项目） #

如果项目已经在使用Redux、Zustand、Jotai等状态管理库，可以直接把需要持久化的状态存在全局store里，配置持久化插件就可以实现跨组件、跨会话的状态保留，不需要自己手写存储逻辑。

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