如何解决React Context API无法集成共享购物车结账数组状态的问题

核心问题定位与对应修复 #

• Context Provider传值语法错误
  原代码中value={arrCheckoutAmount, setArrCheckoutAmount}使用了JavaScript逗号表达式规则，表达式最终仅返回最后一个值setArrCheckoutAmount，没有将需要共享的arrCheckoutAmount状态和更新函数一起传递给下游。需将传值改为对象结构包裹两个状态值。
• Provider嵌套位置不符合路由渲染规则
  原代码将CheckoutContext.Provider放置在<Switch>组件内部，而Switch组件的渲染逻辑为：仅遍历直接子级的Route元素匹配对应路径，匹配成功后仅渲染命中的Route内容，不会将非Route类型的直接子元素作为公共父容器挂载到组件树。这会导致Provider从未真正给下游路由组件提供上下文值。需将Provider移到Switch外层，完整包裹所有路由组件。
• Context空值兜底缺失
  原代码创建Context时默认值设为null，一旦上下文传值异常，下游组件直接解构arrCheckoutAmount属性时会触发空值解构报错。需给Context设置和使用结构匹配的默认值，提升代码容错性。

修复后的参考代码 #

CheckoutContext.jsx #

import {createContext} from "react";

// 匹配使用结构设置默认值，避免空值报错
export const CheckoutContext = createContext({
  arrCheckoutAmount: [],
  setArrCheckoutAmount: () => {}
});

App.js #

import {useState} from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import './App.css';
import HomePage from "./components/home/HomePage.jsx";
import CheckoutPage from "./components/checkout/CheckoutPage.jsx";
import {CheckoutContext} from "./contexts/CheckoutContext.jsx";

function App() {
  const [arrCheckoutAmount, setArrCheckoutAmount] = useState([]);

  return (
    <Router>
      {/* Provider移至Switch外层，包裹所有路由 */}
      <CheckoutContext.Provider value={{arrCheckoutAmount, setArrCheckoutAmount}}>
        <Switch>
          <Route path="/" exact component={HomePage}/>
          <Route path="/checkout" exact component={CheckoutPage}/>
        </Switch>
      </CheckoutContext.Provider>
    </Router>    
  );
}

export default App;

其余组件（HomePage.jsx、CheckoutPage.jsx）的上下文解构逻辑已经适配对象传值结构，无需额外修改，调整后即可实现arrCheckoutAmount状态在两个页面组件间的正常读取与更新。

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