您可以使用formik执行类似的操作

export function ProductsList(props) {
    const [products, setProducts] = useState();

    const formik = useFormik({
        initialValues: {},
        onSubmit: (values) => {
            // implement add to cart logic here
            // values object will contain product id as keys and quantity as values
        }
    });

    useEffect(() => {
        const products = [] // here should be products loading logic
        
        setProducts(products);
    }, []);

    if (!products) return <Loading />

    return (
        <form id="products-form" onSubmit={formik.handleSubmit}>
            <div id="products-list">
                {products.map(product => (<div id={product.id}>
                    {/* product card description */}
                    <input name="quantity" type="number" onChange={(e) => formik.setFieldValue(product.id, e.target.value)} />
                </div>))}
            </div>
            <div id="submit-button">
                <button type="submit">Submit</button>
            </div>
        </form>
    )
}

字符串

你也可以使用redux数据存储，每当你在购物车中添加一个项目（价格或数量）。
当你需要显示的总数，所以你计算的价格和数量
例如：-5数量和40价格合计=（5 * 40）= 200