本文介绍了无法集成使用上下文API来共享商店结账数组状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在需要由不同组件共享状态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 (
    
      
        
          
          
        
      
        
  );
}

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: ,  quantity: 0 },
    {name: "Redmi", cost: 15, photo: , quantity: 0 },
    {name: "Huawei", cost: 17, photo: ,  quantity: 0 },
    {name: "IPhone", cost: 23 , photo: ,  quantity: 0 },
    {name: "Xiaomi", cost: 17 , photo: ,  quantity: 0 },
    {name: "Samsung S7", cost: 21 , photo: ,  quantity: 0 },
    {name: "HP Spectre", cost: 200 , photo: ,  quantity: 0 },
    {name: "Dell", cost: 175 , photo: ,  quantity: 0 },
    {name: "Acer Swift", cost: 150 , photo: ,  quantity: 0 },
    {name: "Asus", cost: 135 , 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 (
    

      
 
        

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。