无法集成使用上下文 API 共享商店结帐数组状态

Question

我需要状态arrCheckoutAmount并且现在由不同的组件共享，即CheckoutPageComponent，以便在CheckoutPageComponent中可以使用来自arrCheckoutAmount状态的数据。
我将提供两组代码，一组是我尝试集成使用上下文 API，另一组是在我引入使用上下文 API 之前。
使用上下文API：
• CheckoutContext.jsx

import {createContext} from "react";
export const CheckoutContext = createContext(null);

• 应用程序.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>
<Switch>
<CheckoutContext.Provider value={arrCheckoutAmount, setArrCheckoutAmount}>
<Route path="/" exact component={HomePage}/>
<Route path="/checkout" exact component={CheckoutPage}/>
</CheckoutContext.Provider>
</Switch>
</Router>    
);
}
export default App;

• 主页.jsx

import {useState, useContext}  from "react";
import {CheckoutContext} from "../../contexts/CheckoutContext.jsx";
import {Link} from "react-router-dom";
import '../../App.css';
import ProductComponent from "./components/ProductComponent.jsx";
import RedmiPhoto from "../../images/redmi_note_10_5G_phone.jpeg";
import HuaweiPhoto from "../../images/huawei_p40_pro_phone.jpg";
import OppoPhoto from "../../images/Oppo_Reno_5F.jpg";
import IPhonePhoto from "../../images/iphone_X_phone.jpg";
import XiaomiPhoto from "../../images/xiaomi_Mi_11i_phone.jpg";
import SamsungS7Photo from "../../images/samsung_S7.png";
import HPSpectrePhoto from "../../images/HP-Spectre-13-X360.jpg";
import DellPhoto from "../../images/Dell-XPS-13-laptop.jpg";
import AcerSwiftPhoto from "../../images/Acer-Swift-5-Pro-intel-laptop.jpg";
import AsusPhoto from "../../images/Asus-ExpertBook-B950.jpg";
const HomePage = () => {
const [productsData, setProductsData] = useState([
{name: "Oppo", cost: 13, photo: <img src={OppoPhoto} width="100px" height="100px" alt="Oppo_Photo" />,  quantity: 0 },
{name: "Redmi", cost: 15, photo: <img src={RedmiPhoto} width="100px" height="100px" alt="RedMi_Photo" />, quantity: 0 },
{name: "Huawei", cost: 17, photo: <img src={HuaweiPhoto} width="100px" height="100px" alt="Huawei_Photo" />,  quantity: 0 },
{name: "IPhone", cost: 23 , photo: <img src={IPhonePhoto} width="100px" height="100px" alt="IPhone_Photo" />,  quantity: 0 },
{name: "Xiaomi", cost: 17 , photo: <img src={XiaomiPhoto} width="100px" height="100px" alt="Xiaomi_Photo" />,  quantity: 0 },
{name: "Samsung S7", cost: 21 , photo: <img src={SamsungS7Photo} width="100px" height="100px" alt="Samsung S7_Photo" />,  quantity: 0 },
{name: "HP Spectre", cost: 200 , photo: <img src={HPSpectrePhoto} width="100px" height="100px" alt="HP Spectre_Photo" />,  quantity: 0 },
{name: "Dell", cost: 175 , photo: <img src={DellPhoto} width="100px" height="100px" alt="Dell_Photo" />,  quantity: 0 },
{name: "Acer Swift", cost: 150 , photo: <img src={AcerSwiftPhoto} width="100px" height="100px" alt="Acer Swift_Photo" />,  quantity: 0 },
{name: "Asus", cost: 135 , photo: <img src={AsusPhoto} width="100px" height="100px" alt="Asus_Photo" />,  quantity: 0 }
]); 
const [arrNumCart, arrSetNumCart] = useState([]);
const {arrCheckoutAmount, setArrCheckoutAmount} = useContext(CheckoutContext);
const handleProductQuantityChange = ({ name, quantity}) => {
const newProductList = [...productsData];
const prodIndex = productsData.findIndex(x => x.name === name);
newProductList[prodIndex].quantity = quantity;
setProductsData(newProductList);
};
const handleAddToCart = ( theQuantity, name ) => {
const newArrNumCart = [...arrNumCart];
const newSum = theQuantity;
newArrNumCart.push(newSum);
arrSetNumCart(newArrNumCart);

const xProdIndex = productsData.findIndex(x => x.name === name);
const newArrCheckoutAmount = [...arrCheckoutAmount];
const quantityByCost = theQuantity * productsData[xProdIndex].cost;
newArrCheckoutAmount.push(quantityByCost);
setArrCheckoutAmount(newArrCheckoutAmount);
};
const quantitySum = arrNumCart.reduce((x, y ) => {
return x + y;
}, 0);
const numCheckoutAmount = arrCheckoutAmount.reduce((x, y ) => {
return x + y;
}, 0);
return (
<div className="body-section">
<div style={{ marginLeft: '29.5rem'}}> 
{quantitySum}                  <span style={{ marginLeft: '4.7rem'}}></span>  
Total Bill   {numCheckoutAmount}  <span style={{ marginLeft: '0.8rem'}}></span> 
<Link to="/checkout">
<button>Proceed to Checkout</button>
</Link> 
</div>     
{productsData.map((productData, i) => <ProductComponent key={i} name={productData.name} cost={productData.cost} photo={productData.photo} onQuantityChange={handleProductQuantityChange} onClickAddToCart={handleAddToCart}/>)}
</div>
);
}
export default HomePage;

• 结帐页面.jsx

import {useState, useContext} from "react";
import {CheckoutContext} from "../../contexts/CheckoutContext.jsx";
import '../../App.css';
const CheckoutPage = () => {
const {arrCheckoutAmount} = useContext(CheckoutContext);
return (
<div className="App">
<h1>Checkout Page {arrCheckoutAmount}</h1>
</div>
);
}
export default CheckoutPage;

•ProductComponent.jsx(对于此问题不是必需的)

• 在尝试在 Replit/GitHub 上使用上下文 API 之前的代码

Answer 1

你看到任何错误吗？我将您的代码从 replit 复制到代码沙箱，看起来它可以工作，代码沙箱上的结果是您所期望的吗？