React JS页面刷新后如何停留在当前组件而非返回表单？

你用useState保存的状态是内存级别的，页面刷新时组件会重新挂载，所有状态都会回到初始值（比如showRapportPassage初始为false），所以刷新后自然回到表单页面。

下面给两种可行的解决方案：

方案一：用URL参数持久化状态（推荐） #

这种方式符合Web应用的路由语义，用户刷新、分享链接都能保持当前状态。需要用到React Router（如果项目未集成，先安装依赖）。

步骤1：集成React Router（未集成的话） #

先安装依赖：

npm install react-router-dom

在根组件中配置路由，把AccesClientsForm包裹在路由容器里：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<AccesClientsForm />} />
      </Routes>
    </Router>
  );
}

步骤2：修改AccesClientsForm组件 #

引入路由工具读写URL参数，修改状态初始化和提交逻辑：

import { useSearchParams } from 'react-router-dom';

function AccesClientsForm() {
  const [searchParams, setSearchParams] = useSearchParams();
  // 原有状态保留，新增从URL恢复状态的逻辑
  const [showRapportPassage, setShowRapportPassage] = useState(false);
  const [showCheckMateriel, setShowCheckMateriel] = useState(false);
  const [showSuiviQualite, setShowSuiviQualite] = useState(false);
  const [client, setClient] = useState('');

  // 组件挂载时读取URL参数，恢复状态
  useEffect(() => {
    getClients();
    
    const type = searchParams.get('type');
    const clientName = searchParams.get('client');
    if (type && clientName) {
      setClient(clientName);
      switch(type) {
        case 'passage':
          setShowRapportPassage(true);
          break;
        case 'materiel':
          setShowCheckMateriel(true);
          break;
        case 'qualite':
          setShowSuiviQualite(true);
          break;
      }
    }
  }, [searchParams]);

  // 修改提交逻辑，更新URL参数
  const handleSubmit = (e) => {
    e.preventDefault();
    setError(false);

    const clientsArray = [];
    clients.map((client) => {
      clientsArray.push(client.client, client.email);
    });

    let indexClients = clientsArray.indexOf(email);
    if (indexClients !== -1) {
      const clientName = clientsArray[indexClients - 1];
      setClient(clientName);
      
      let typeParam = '';
      if (rapportType === 'Rapports de passage') {
        typeParam = 'passage';
        setShowRapportPassage(true);
      } else if (rapportType === 'Checks Matériel') {
        typeParam = 'materiel';
        setShowCheckMateriel(true);
      } else if (rapportType === 'Suivi Qualité') {
        typeParam = 'qualite';
        setShowSuiviQualite(true);
      } else {
        alert("Veuillez choisir un type de document");
        return;
      }

      // 更新URL参数
      setSearchParams({ type: typeParam, client: clientName });
    } else {
      setError(true);
    }
  };

  // 原有return部分逻辑不变
}

方案二：用本地存储（localStorage）持久化状态 #

如果不想用路由，可以把状态存在浏览器本地存储，刷新时读取恢复。

步骤1：提交时保存状态到localStorage #

修改handleSubmit函数：

const handleSubmit = (e) => {
  e.preventDefault();
  setError(false);

  const clientsArray = [];
  clients.map((client) => {
    clientsArray.push(client.client, client.email);
  });

  let indexClients = clientsArray.indexOf(email);
  if (indexClients !== -1) {
    const clientName = clientsArray[indexClients - 1];
    setClient(clientName);
    
    let rapportKey = '';
    if (rapportType === 'Rapports de passage') {
      rapportKey = 'passage';
      setShowRapportPassage(true);
    } else if (rapportType === 'Checks Matériel') {
      rapportKey = 'materiel';
      setShowCheckMateriel(true);
    } else if (rapportType === 'Suivi Qualité') {
      rapportKey = 'qualite';
      setShowSuiviQualite(true);
    } else {
      alert("Veuillez choisir un type de document");
      return;
    }

    // 保存状态到本地存储
    localStorage.setItem('rapportState', JSON.stringify({
      type: rapportKey,
      client: clientName
    }));
  } else {
    setError(true);
  }
};

步骤2：挂载时读取本地存储恢复状态 #

添加useEffect逻辑：

useEffect(() => {
  getClients();

  // 读取本地存储恢复状态
  const savedState = localStorage.getItem('rapportState');
  if (savedState) {
    const { type, client } = JSON.parse(savedState);
    setClient(client);
    switch(type) {
      case 'passage':
        setShowRapportPassage(true);
        break;
      case 'materiel':
        setShowCheckMateriel(true);
        break;
      case 'qualite':
        setShowSuiviQualite(true);
        break;
    }
  }
}, []);

可选：退出表单时清除存储 #

如果希望用户回到表单时清空状态，可以添加重置逻辑：

const resetToForm = () => {
  setShowRapportPassage(false);
  setShowCheckMateriel(false);
  setShowSuiviQualite(false);
  localStorage.removeItem('rapportState');
};

注意事项 #

• URL参数方案更适合需要分享链接的场景，但如果client包含敏感信息，建议加密后再传递，或避免放在URL中。
• localStorage是持久化存储，除非手动清除会一直保留；若只想在当前会话生效，可替换为sessionStorage。

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