React页面刷新时如何重置状态变量？

要实现页面刷新时Status始终以'Desktop'启动，同时支持多组件共享状态、子组件更新父组件，核心是把状态放在顶层父组件/Context中，初始值固定为'Desktop'，具体步骤如下：

1. 顶层维护共享状态 #

把Status状态放在应用最顶层的父组件（比如App.js）里，用useState初始化时直接设为'Desktop'。这样每次页面刷新，组件重新挂载时都会从这个默认值开始，不会残留之前的修改。

示例代码（父组件）：

import { useState } from 'react';
import Component1 from './Component1';
import OtherComponent from './OtherComponent';

function App() {
  // 固定初始值为'Desktop'，刷新自动重置
  const [status, setStatus] = useState('Desktop');

  // 提交到数据库的逻辑（仅临时保存，不影响初始值）
  const handleSubmit = async () => {
    await fetch('/api/save-status', {
      method: 'POST',
      body: JSON.stringify({ status }),
      headers: { 'Content-Type': 'application/json' }
    });
  };

  return (
    <div>
      {/* 把状态和更新函数传给子组件 */}
      <Component1 status={status} setStatus={setStatus} />
      {/* 其他仅展示状态的组件只传status */}
      <OtherComponent status={status} />
      <button onClick={handleSubmit}>提交设置</button>
    </div>
  );
}

export default App;

2. 子组件更新父组件状态 #

子组件通过接收父组件传递的setStatus函数，在用户操作（如下拉菜单选择）时调用该函数更新状态，所有依赖该状态的组件都会自动同步更新。

示例代码（子组件Component1）：

function Component1({ status, setStatus }) {
  const statusOptions = ['Desktop', 'Table', 'Cell phone', 'Mobile phone'];

  return (
    <select 
      value={status} 
      onChange={(e) => setStatus(e.target.value)}
    >
      {statusOptions.map(opt => (
        <option key={opt} value={opt}>{opt}</option>
      ))}
    </select>
  );
}

export default Component1;

3. 组件层级深？用Context简化传递 #

如果组件层级较多，用props逐层传递状态会很繁琐，这时可以用React Context来全局共享状态：

创建StatusContext #

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

const StatusContext = createContext();

export function StatusProvider({ children }) {
  // 同样固定初始值为'Desktop'
  const [status, setStatus] = useState('Desktop');
  return (
    <StatusContext.Provider value={{ status, setStatus }}>
      {children}
    </StatusContext.Provider>
  );
}

// 自定义钩子，方便子组件使用
export function useStatus() {
  return useContext(StatusContext);
}

在App中包裹Provider #

import { StatusProvider } from './StatusContext';

function App() {
  const handleSubmit = async () => {
    // 提交逻辑同上
  };

  return (
    <StatusProvider>
      <div>
        <Component1 />
        <OtherComponent />
        <button onClick={handleSubmit}>提交设置</button>
      </div>
    </StatusProvider>
  );
}

子组件使用Context #

// Component1.js
import { useStatus } from './StatusContext';

function Component1() {
  const { status, setStatus } = useStatus();
  const statusOptions = ['Desktop', 'Table', 'Cell phone', 'Mobile phone'];

  return (
    <select 
      value={status} 
      onChange={(e) => setStatus(e.target.value)}
    >
      {statusOptions.map(opt => (
        <option key={opt} value={opt}>{opt}</option>
      ))}
    </select>
  );
}

注意事项 #

• 不要用localStorage/sessionStorage存储该状态，否则刷新会读取之前的值，不符合“每次启动默认Desktop”的要求
• 提交到数据库的操作仅作为临时保存，不要在组件挂载时从数据库读取该状态，始终以硬编码的'Desktop'作为初始值

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