ReactTS应用中避免meal循环传递的props优化方案咨询

在ReactTS应用里，目前通过路由state循环传递meal数据的实现逻辑不合理：

• meal从外部传入MealDetails组件，再通过路由state传给AddFood（用来跳转回MealDetails）
• BarcodeScannerPluginRework核心功能依赖meal，得先由BarcodeScannerRework从路由state获取后传入，扫描完成又要把meal带回AddFood
  整个流程中meal一直在组件间绕圈传递，想知道能不能把meal存在MealDetails里，只给后续组件/跳转目标传修改meal的函数，不用传完整数据？

现有代码 #

MealDetails.tsx #

const MealDetails = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const { meal } = location.state || {};
  

  return (
    <div className="MealDetails">
      <Link className="Link" to={`/AddFood/${meal.id}`} state={{ meal: meal }}>
        <div className="MealDetailsAddFoodButton">
          <img className="SVG" src={SVG} alt="+21" />
        </div>
      </Link>
    </div>
  );
};

AddFood.tsx #

const AddFood = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const mealId = useParams();

  const { meal } = location.state || {};

  return (
    <div className="AddFood">
      <header className="AddFoodHeader">
        <div className="BackArrow-Meal">
          <ArrowBackIcon
            onClick={() => {
              navigate(`/MealDetails/${mealId.id}`, { state: { meal : meal } });
            }}
            sx={{ fontSize: 35 }}
          ></ArrowBackIcon>
        </div>
        <div className="AddFoodSearchBar">
          <Link className="Link" to={`/BarcodeScanner/`} state={{ meal : meal }} >
            <CropFreeIcon className="QRIcon"sx={{ fontSize: 30 }}></CropFreeIcon>
          </Link>
        </div>
      </header>
    </div>
  );
};

BarcodeScannerRework.jsx #

const BarcodeScannerRework = () => {
    const navigate = useNavigate();
    const location = useLocation();

    const { meal } = location.state;

  return (
    <div className="BarcodeScannerRework">
      <div className="BarcodeScannerReworkPlugin">
        <BarcodeScannerPluginRework meal={meal}/>
      </div>
    </div>
  );
};

BarcodeScannerPluginRework.jsx #

const BarcodeScannerPluginRework = ({meal}) => {
  const navigate = useNavigate();
  let html5QrCode;
  useEffect(() => { //I've shortened this part a lot - it navigates when there is a successful response
          navigate(`/AddFood/${meal.id}`, { state: { eanCodeFromCamera : decodedText , meal : meal}
  });

  return <div id={qrcodeId}></div>;
};

这个思路完全可行，而且能彻底解决循环传参的问题。核心是用局部状态管理（React Context）把meal集中存储，组件间通过Context获取数据和更新函数，不再依赖路由state传递完整对象。

具体实现步骤 #

1. 创建MealContext做局部状态管理 #

先封装一个Context，用来存储meal和对应的更新方法：

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义meal的类型（根据你的实际结构调整）
interface Meal {
  id: string;
  // 其他字段比如name、foods等...
}

interface MealContextType {
  meal: Meal;
  updateMeal: (newMeal: Meal) => void;
}

const MealContext = createContext<MealContextType | undefined>(undefined);

// 封装Provider组件，用来提供状态
export const MealProvider = ({ children, initialMeal }: { children: ReactNode; initialMeal: Meal }) => {
  const [meal, setMeal] = useState<Meal>(initialMeal);

  const updateMeal = (newMeal: Meal) => {
    setMeal(newMeal);
  };

  return (
    <MealContext.Provider value={{ meal, updateMeal }}>
      {children}
    </MealContext.Provider>
  );
};

// 封装自定义Hook，简化组件获取Context的逻辑
export const useMeal = () => {
  const context = useContext(MealContext);
  if (!context) {
    throw new Error('useMeal必须在MealProvider内部使用');
  }
  return context;
};

2. 修改MealDetails.tsx作为Context入口 #

把MealDetails作为Provider的宿主，初始化meal状态，后续跳转只传id：

import { useLocation, useNavigate } from 'react-router-dom';
import { MealProvider } from './MealContext';

const MealDetails = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { meal } = location.state || {};

  // 处理meal不存在的边界情况
  if (!meal) {
    navigate('/');
    return null;
  }

  return (
    <MealProvider initialMeal={meal}>
      <div className="MealDetails">
        {/* 跳转只传id，不用带完整meal */}
        <Link className="Link" to={`/AddFood/${meal.id}`}>
          <div className="MealDetailsAddFoodButton">
            <img className="SVG" src={SVG} alt="+21" />
          </div>
        </Link>
      </div>
    </MealProvider>
  );
};

3. 修改AddFood.tsx通过Context获取数据 #

不再从路由state拿meal，直接用自定义Hook获取：

import { useNavigate, useParams } from 'react-router-dom';
import { useMeal } from './MealContext';

const AddFood = () => {
  const navigate = useNavigate();
  const { mealId } = useParams();
  const { meal } = useMeal();

  return (
    <div className="AddFood">
      <header className="AddFoodHeader">
        <div className="BackArrow-Meal">
          <ArrowBackIcon
            onClick={() => {
              // 跳转回MealDetails，不用传meal
              navigate(`/MealDetails/${mealId}`);
            }}
            sx={{ fontSize: 35 }}
          ></ArrowBackIcon>
        </div>
        <div className="AddFoodSearchBar">
          {/* 跳转扫码页也不用传meal */}
          <Link className="Link" to={`/BarcodeScanner/`}>
            <CropFreeIcon className="QRIcon" sx={{ fontSize: 30 }}></CropFreeIcon>
          </Link>
        </div>
      </header>
    </div>
  );
};

4. 修改BarcodeScannerRework.jsx #

通过Context获取meal，不用再从路由state拿：

import { useMeal } from './MealContext';
import BarcodeScannerPluginRework from './BarcodeScannerPluginRework';

const BarcodeScannerRework = () => {
  const { meal } = useMeal();

  return (
    <div className="BarcodeScannerRework">
      <div className="BarcodeScannerReworkPlugin">
        <BarcodeScannerPluginRework meal={meal}/>
      </div>
    </div>
  );
};

5. 修改BarcodeScannerPluginRework.jsx #

直接通过Context获取meal和更新函数，扫码完成后更新状态再跳转：

import { useNavigate } from 'react-router-dom';
import { useMeal } from './MealContext';

const BarcodeScannerPluginRework = () => {
  const navigate = useNavigate();
  const { meal, updateMeal } = useMeal();
  let html5QrCode;

  useEffect(() => {
    // 扫码成功后的处理逻辑
    const handleScanSuccess = (decodedText) => {
      // 根据扫码结果更新meal（示例：假设新增食物）
      const updatedMeal = {
        ...meal,
        foods: [...meal.foods, { ean: decodedText }]
      };
      // 调用Context的更新函数修改状态
      updateMeal(updatedMeal);
      
      // 跳转回AddFood，只传必要的eanCode，不用带meal
      navigate(`/AddFood/${meal.id}`, { state: { eanCodeFromCamera: decodedText } });
    };

    // 初始化扫码逻辑（省略原有代码）
    return () => {
      // 清理扫码实例（省略原有代码）
    };
  }, [meal, updateMeal, navigate]);

  return <div id={qrcodeId}></div>;
};

优化优势 #

• 彻底消除meal的循环传递，路由state不再冗余
• 数据修改统一通过Context的更新函数，状态变更更可控
• 组件间解耦，不再依赖路由state传递业务数据，维护成本更低

内容的提问来源于stack exchange，提问作者Cinc-B