React.js中点击Buy按钮无法更新总价问题求助

问题描述 #

开发了一个带商品购买功能的多页Web应用，采用React Bootstrap样式，商品以对象数组形式存储。当前点击Buy按钮后，无法将对应商品价格存入并累加到总价中，编写的priceTotal函数未正常执行，怀疑缺少代码。原本计划通过props在Products.js中传递值来计算总价，不确定该方案是否正确，请求技术帮助。

问题根源分析 #

• priceTotal函数未正确获取商品价格：点击按钮时未传递对应商品的价格，而是使用了组件内初始值为0的price状态，导致累加无效。
• TotalPrice组件未正确使用props：组件内错误拼写为prop.total，且在Products组件中引入时未传入total props。
• 状态更新逻辑不严谨：直接用props.total + price可能因React异步更新机制导致数据不一致，应使用函数式更新获取最新状态。

修复后的代码 #

1. Products.js 修改 #

// Import React, useState and bootstrap components //
import React from "react";
import Button from "react-bootstrap/Button";
import Card from "react-bootstrap/Card";
import Dropdown from "react-bootstrap/Dropdown";
import TotalPrice from "./TotalPrice";
import "./Box.css";

// create Products component //
export default function Products(props) {
  // Create productCards array of objects to store product information such as name, description, price etc //
  const productCards = [
    {
      image:
        "https://www.magicalmakeup.co.uk/cdn/shop/products/rose-champagne-main_1200x.jpg?v=1666704885",
      product_name: "Eye Twinkle",
      description:
        "Fine glitter topper to make any eye look pop and channel your inner fairy.",
      price: 12,
      title: "Select Colour",
      option1: "Blue Lagoon",
      option2: "Fairy Spell",
      option3: "Enchanted Forest",
    },
    {
      image:
        "https://colourpop.com/cdn/shop/files/Bundle-CupidsCalling.jpg?v=1714417894&width=988",
      product_name: "Flutter Blusher",
      description:
        "Velvety baked blusher for that natural flush and innocent fairy essence.",
      price: 15,
      title: "Select Colour",
      option1: "Pretty Petal",
      option2: "Pinched Peach",
      option3: "Pale Pink",
    },
    {
      image:
        "https://www.amorlashes.co.uk/cdn/shop/products/WINGINGIT_2048x2048.jpg?v=1680019595",
      product_name: "Wink Lashes",
      description:
        "Faux Mink lashes to give that ultimate doll eye look, wispy effect to your lashes.",
      price: 7,
      title: "Select Colour",
      option1: "Cat Eye",
      option2: "Dolly Wing",
      option3: "Flutter Baby",
    },
    {
      image:
        "https://plouise.co.uk/cdn/shop/files/Magic-Dust-Twinkle-Toes.jpg?v=1705928290&width=700",
      product_name: "Sparkle dust",
      description:
        "Loose iridescent highlighter that is both for the face and body to give a magical glow.",
      price: 20,
      title: "Select Colour",
      option1: "Pink Cosmo",
      option2: "Lilac Light",
      option3: "Golden Beam",
    },
  ];

  // create renderProducts function to render information in to assigned card and dropdown components //
  const renderProducts = (card, index) => {
    return (
      <Card style={{ width: "18rem" }} key={index} className="box">
        <Card.Img variant="top" src={card.image} />
        <Card.Body>
          <Card.Title>{card.product_name}</Card.Title>
          <Card.Text>{card.description}</Card.Text>
          <Card.Text>£{card.price}</Card.Text>
          <Dropdown key={index}>
            <Dropdown.Toggle variant="danger" id="dropdown-basic">
              {card.title}
            </Dropdown.Toggle>

            <Dropdown.Menu>
              <Dropdown.Item href="#/action-1">{card.option1}</Dropdown.Item>
              <Dropdown.Item href="#/action-2">{card.option2}</Dropdown.Item>
              <Dropdown.Item href="#/action-3">{card.option3}</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          {/* 直接将当前商品价格作为参数传入priceTotal */}
          <Button onClick={() => priceTotal(card.price)} variant="primary">
            Buy
          </Button>
        </Card.Body>
      </Card>
    );
  };

  // 使用函数式更新获取最新total值，避免异步更新问题
  function priceTotal(itemPrice) {
    props.changeTotal(prevTotal => prevTotal + itemPrice);
  }

  return (
    <div>
      <header className="Pages">
        <h1>Products</h1>
      </header>
      {/* 传入total props给TotalPrice组件 */}
      <TotalPrice total={props.total} />
      {/* Use .map method to render each product in productCards array */}
      <div className="grid">{productCards.map(renderProducts)}</div>
    </div>
  );
}

2. TotalPrice.js 修改 #

// import React //
import React from "react";

// create TotalPrice component //
export default function TotalPrice(props) {
  return (
    <div>
      <header className="Total">
        {/* 修正拼写错误：prop -> props */}
        <h2>Total Price: £{props.total}</h2>
      </header>
    </div>
  );
}

3. App.js（无需修改，当前逻辑正确） #

修复说明 #

• 传递商品价格：点击Buy按钮时，通过箭头函数将当前商品的card.price直接传给priceTotal函数，确保获取正确的商品价格。
• 函数式状态更新：使用prevTotal => prevTotal + itemPrice的方式更新总价，保证每次基于最新状态值计算，避免异步更新误差。
• 修正props传递与拼写：在Products组件中给TotalPrice传入total props，同时修正TotalPrice组件中prop.total的拼写错误为props.total。

内容的提问来源于stack exchange，提问作者NewQode10