无法集成使用上下文API来共享商店结账数组状态 [英] Can't integrate use context API to share shop checkout array state

问题描述

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

import {createContext} from "react";

export const CheckoutContext = createContext(null);

·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>
      <Switch>
        <CheckoutContext.Provider value={arrCheckoutAmount, setArrCheckoutAmount}>
          <Route path="/" exact component={HomePage}/>
          <Route path="/checkout" exact component={CheckoutPage}/>
        </CheckoutContext.Provider>
      </Switch>
    </Router>    
  );
}

export default App;

·HomePage.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;

·CheckoutPage.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(对于此问题不是那么必要)

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

推荐答案

您是否看到任何错误？我将您的代码从Replit复制到codesandbox，看起来可以工作，在codesandbox上的结果与您预期的一样吗？

这篇关于无法集成使用上下文API来共享商店结账数组状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！