我使用两个组件：-"CartContainer.jsx”用于计算用户添加到购物车中的产品的成本。

更新日期：

import React, { useEffect, useState } from "react";
import { useStateValue } from "../context/StateProvider";
import { actionType } from "../context/reducer";
//another imports
import { Link } from "react-router-dom";
import PaymentContainer from "./PaymentContainer";

const CartContainer = () => {
    const [{ cartShow, cartItems, user }, dispatch] = useStateValue();
    const [flag, setFlag] = useState(1);
    const [tot, setTot] = useState(0);

    //another methods

    useEffect(() => {
        let totalPrice = cartItems.reduce(function (accumulator, item) {
            return accumulator + item.qty * item.price;
        }, 0);
        setTot(totalPrice);
        console.log(tot);
    }, [tot, flag]);

    //another methods

    return (
        <motion.div initial... animate... exit... class...">

        //something code

            {/* bottom section */}

        //something code

                    {/* cart total section code */}
                    <div class...>
                        <div class...>
                            <p class...>Sub Total</p>
                            <p class...>$ {tot}</p>
                        </div>
                        <div class...>
                            <p class...>Delivery</p>
                            <p class...>$ 2.5</p>
                        </div>

                        //another code

                        <div class...>
                            <p class...>Total</p>
                            <p class...>${tot + 2.5}</p>
                        </div>

                        {user ? (
                            <Link to={'/payment'}> *//it's link to PaymentContainer*
                                <motion.button whileTap={{ scale: 0.8 }} type="button" class...>Check Out</motion.button>
                            </Link>
                        ) : (
                            //another code
                        )}
                    </div>
                    <div>
                        <PaymentContainer totalAmount={tot} />
                    </div>
                </div>
            ) : (
        //another code
            )}
        </motion.div>
    );
};

export default CartContainer;

-"PaymentContainer.jsx”此组件与Stripe.js一起工作，并具有“amount”变量。

更新日期：

import React from "react";

const PaymentContainer = ({totalAmount}) => {
  const containerAmount = totalAmount;
  console.log(totalAmount);
  return (
    <div>
      <h2>Total: {containerAmount}</h2>
    </div>
  );
};

export default PaymentContainer;

我想从“CartContainer.jsx”项目的总成本被分配到“amount”变量在“PaymentContainer.jsx”谢谢大家：）
我发现一个类似的问题在这个论坛，并试图应用解决方案，但我不能。我试图适应这个代码在文件“PaymentContainer.jsx”

const handleInputChange = (e) => {   
  const valueFilterActive = document.getElementById("activeFilter").value;
  const valueFilterName = document.getElementById("bussFilter").value;
  // this will set `inputValues` variable to be an object with `valueFilterActive` and `valueFilterName` properties
  setInputValues({valueFilterActive, valueFilterName})
  alert(valueFilterName+valueFilterActive);   
};

**更新日期：**App.js

import React, { useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import { CreateContainer, Header, MainContainer, PaymentContainer } from "./components";
import { useStateValue } from "./context/StateProvider";
import { getAllFoodItems } from "./utils/firebaseFunctions";
import { actionType } from "./context/reducer";

const App = () => {
    const [{foodItems}, dispatch] = useStateValue();

    const fetchData = async () => {
        await getAllFoodItems().then(data => {
            dispatch({
                type : actionType.SET_FOOD_ITEMS,
                foodItems : data,
            });
        });
    };

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <AnimatePresence mode="wait">
            <div class...>
                <Header />

                <main class...>
                    <Routes>
                        <Route path="/*" element={<MainContainer />} />
                        <Route path="/createItem" element={<CreateContainer />} />

            //here PaymentContainer
                        <Route path="/payment" element={<PaymentContainer />} /> here PaymentContainer
            //here PaymentContainer

                    </Routes>
                </main>
            </div>
        </AnimatePresence>
    );
}

export default App

更新日期：

当我将产品添加到购物车并获得金额时，浏览器控制台，但当我通过“链接”转到“付款容器”时，该值未定义。