React JS账单商品增减与总价计算功能开发求助

核心需求 #

• 点击商品卡片将商品添加至账单列表
• 重复添加同一商品时，自动增加该商品数量并更新商品总价（单价×数量）
• 点击+/-按钮调整商品数量，同步更新商品总价及账单总金额
• 当商品数量减至0时，将该商品从账单列表中移除

代码修正与实现步骤 #

1. 状态定义 #

在组件中定义账单列表和总金额的状态：

const [billItems, setBillItems] = useState([]);
const [totalAmount, setTotalAmount] = useState(0);

2. 商品添加逻辑 #

实现点击商品卡片的添加逻辑，判断商品是否已在账单中，存在则递增数量，不存在则新增条目：

const handleCheckClick = (item) => {
  setBillItems(prevItems => {
    const existingItem = prevItems.find(ele => ele.user_id === item.user_id);
    if (existingItem) {
      return prevItems.map(ele => 
        ele.user_id === item.user_id 
          ? {...ele, quantity: ele.quantity + 1, total_price: ele.price * (ele.quantity + 1)} 
          : ele
      );
    } else {
      return [...prevItems, {...item, quantity: 1, total_price: item.price}];
    }
  });
};

3. 数量增减逻辑 #

实现数量增减函数，减少时若数量为1则直接移除该商品：

const incre = (userId) => {
  setBillItems(prevItems => 
    prevItems.map(ele => 
      ele.user_id === userId 
        ? {...ele, quantity: ele.quantity + 1, total_price: ele.price * (ele.quantity + 1)} 
        : ele
    )
  );
};

const decre = (userId) => {
  setBillItems(prevItems => {
    const updatedItems = prevItems.map(ele => 
      ele.user_id === userId 
        ? {...ele, quantity: ele.quantity - 1, total_price: ele.price * (ele.quantity - 1)} 
        : ele
    );
    return updatedItems.filter(ele => ele.quantity > 0);
  });
};

4. 实时计算总金额 #

通过useEffect监听账单列表变化，自动计算并更新总金额：

useEffect(() => {
  const total = billItems.reduce((sum, item) => sum + item.total_price, 0);
  setTotalAmount(total);
}, [billItems]);

5. 修正账单组件 #

修改Bill组件，使用传入的props数据，正确渲染商品总价，并传递增减函数：

function Bill({ billItems, incre, decre }) {
  return (
    <>
      <div className="foo">
        <table>
          <tbody>
            <tr>
              <th>item</th> <th>price</th> <th>qty</th> <th>total_price</th>
            </tr>
            {billItems.map((ele, index) => (
              <tr key={index}>
                <td>{ele.item}</td>
                <td>{ele.price}</td>
                <td>{ele.quantity}</td>
                <td>{ele.total_price}</td>
                <td>
                  <button onClick={() => incre(ele.user_id)}>+</button>
                  <button onClick={() => decre(ele.user_id)}>-</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

6. 主组件渲染修正 #

更新主组件渲染部分，传入正确的props并显示计算后的总金额：

return (
  <>
    <div>
      {item &&
        item
          .filter((person) => person.status === 0)
          .map((ele, index) => (
            <div
              style={{ cursor: "pointer", border: "1px solid black" }}
              key={index}
              className="newmo-card"
              onClick={() => handleCheckClick(ele)}
            >
              {ele.item}
              <br />
              <br />
              <span>{ele.price}</span>
            </div>
          ))}
    </div>
    <Bill billItems={billItems} incre={incre} decre={decre} />
    <h3>Total Amount: {totalAmount}</h3>
  </>
);

关键说明 #

• 以user_id作为商品唯一标识，确保重复添加时正确匹配商品
• 商品总价通过单价×数量实时计算，避免状态不一致
• 利用useEffect自动同步账单总金额，无需手动触发计算
• 数量减至0时自动移除商品，保持账单列表整洁

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