React函数组件Props持久化：返回页面后selectedAPI丢失问题

问题根源 #

从/metrics/:id返回商品列表页时，Shop组件的shopname参数可能丢失，或者组件重新挂载后state被重置，导致useEffect触发else分支将selectedAPI设为null。

解决方案 #

1. 利用路由状态传递shopname

跳转至指标页时携带当前shopname，返回时从路由状态恢复：

// SearchBar组件中跳转逻辑
const navigate = useNavigate();
const handleGoToMetrics = (id) => {
  navigate(`/metrics/${id}`, { state: { shopname: shopname } }); // shopname来自Shop组件的props
};

在Shop组件中，优先从路由状态读取shopname，再结合URL参数更新selectedAPI：

import { useParams, useLocation } from 'react-router-dom';

const Shop = () => {
  const { shopname: urlShopname } = useParams();
  const location = useLocation();
  const [selectedAPI, setSelectedAPI] = useState('');

  useEffect(() => {
    const targetShopname = urlShopname || location.state?.shopname;
    if (!targetShopname) {
      setSelectedAPI('null');
      return;
    }

    // 用对象映射替代冗余的if-else，更易维护
    const apiMap = {
      shopName_1: 'shopApiName_1',
      shopName_2: 'shopApiName_2',
      shopName_3: 'shopApiName_3',
    };
    setSelectedAPI(apiMap[targetShopname] || 'null');
  }, [urlShopname, location.state]);

  // 后续传递selectedAPI给SearchBar
  return <SearchBar selectedAPI={selectedAPI} />;
};

2. 本地存储持久化selectedAPI

在设置selectedAPI时同步存入localStorage，组件挂载时优先从本地存储读取：

const Shop = () => {
  const { shopname } = useParams();
  const [selectedAPI, setSelectedAPI] = useState(
    localStorage.getItem('selectedAPI') || 'null'
  );

  useEffect(() => {
    if (!shopname) return;

    const apiMap = {
      shopName_1: 'shopApiName_1',
      shopName_2: 'shopApiName_2',
      shopName_3: 'shopApiName_3',
    };
    const targetAPI = apiMap[shopname] || 'null';
    setSelectedAPI(targetAPI);
    localStorage.setItem('selectedAPI', targetAPI);
  }, [shopname]);

  return <SearchBar selectedAPI={selectedAPI} />;
};

注意：切换店铺时会自动更新本地存储，避免残留旧API配置。

3. 提升状态到全局上下文

将selectedAPI和店铺状态提升到全局Context，跨组件共享且不受组件卸载影响：

// 创建ShopContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const ShopContext = createContext();

export const ShopProvider = ({ children }) => {
  const [selectedAPI, setSelectedAPI] = useState('null');
  const [currentShopname, setCurrentShopname] = useState('');

  // 初始化时从本地存储恢复
  useEffect(() => {
    const savedAPI = localStorage.getItem('selectedAPI');
    if (savedAPI) setSelectedAPI(savedAPI);
  }, []);

  const updateShopAPI = (shopname) => {
    const apiMap = {
      shopName_1: 'shopApiName_1',
      shopName_2: 'shopApiName_2',
      shopName_3: 'shopApiName_3',
    };
    const targetAPI = apiMap[shopname] || 'null';
    setSelectedAPI(targetAPI);
    setCurrentShopname(shopname);
    localStorage.setItem('selectedAPI', targetAPI);
  };

  return (
    <ShopContext.Provider value={{ selectedAPI, currentShopname, updateShopAPI }}>
      {children}
    </ShopContext.Provider>
  );
};

export const useShop = () => useContext(ShopContext);

在Shop组件中使用Context：

import { useParams } from 'react-router-dom';
import { useShop } from './ShopContext';

const Shop = () => {
  const { shopname } = useParams();
  const { updateShopAPI, selectedAPI } = useShop();

  useEffect(() => {
    if (shopname) updateShopAPI(shopname);
  }, [shopname, updateShopAPI]);

  return <SearchBar selectedAPI={selectedAPI} />;
};

在App.js中包裹路由：

import { ShopProvider } from './ShopContext';
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <ShopProvider>
      <Routes>
        <Route path="/shop/:shopname" element={<Shop />} />
        <Route path="/metrics/:id" element={<Metrics />} />
      </Routes>
    </ShopProvider>
  );
}

4. 确保返回时保留URL参数

在指标页使用navigate(-1)返回上一页，而非跳转至不带参数的路径：

// Metrics组件中返回按钮逻辑
import { useNavigate } from 'react-router-dom';

const Metrics = () => {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1); // 回到上一页，保留原URL的shopname参数
  };

  return <button onClick={handleBack}>返回商品列表</button>;
};

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