如何解决React中useState变量增减时与sellingPrice动态计算失效问题

期望实现：点击增量按钮时，用递增后的quantityCount值与单价相乘，计算出总售价。
实际问题：仅能使用quantityCount的初始值与单价相乘，增减数量时无法动态更新总售价，控制台输出验证了这一点。

用户提供的代码：

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrashCan, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const YourComponent = () => {
  const [productName, setProductName] = useState("");
  const [sellingPrice, setSellingPrice] = useState(0);
  const [quantityCount, setQuantityCount] = useState(0); // 处理增减的状态
  const [newItems, setNewItems] = useState([])

  const enterProductName = (e) =>{
      setProductName(e.target.value);
  }
  const enterSellingPrice = (e) =>{
      let sellingPricePerEach = e.target.value
      setSellingPrice(sellingPricePerEach * quantityCount);

      console.log(sellingPricePerEach * quantityCount);
  }
  let handleSaveItem = () => {
      const newItemData = {productName, sellingPrice,quantityCount};
      setNewItems([...newItems, newItemData]);
      console.log(newItemData);
  }
  let incrementQuantity = () =>{
      setQuantityCount(quantityCount+ 1);
  }
  let decrementQuantity = () =>{
      setQuantityCount(quantityCount- 1);
  }

  return (
    <div>
      {/* 原代码缺失的输入区域，补充以保证逻辑完整 */}
      <input 
        type="text" 
        value={productName} 
        onChange={enterProductName} 
        placeholder="产品名称"
      />
      <input 
        type="number" 
        onChange={enterSellingPrice} 
        placeholder="单价"
      />
      <button onClick={handleSaveItem}>保存商品</button>

      <div>Items</div>
      {newItems.map((items)=>(
        <div key={items.productName + items.quantityCount}>
          <div>
            <div>{items.productName}</div>
            <div>{items.sellingPrice}</div>
          </div>
          <div><FontAwesomeIcon icon={faTrashCan} /></div>
        </div>
      ))}

      <div>Quantity</div>
      <div>
        <FontAwesomeIcon icon={faPlus} onClick={incrementQuantity}/>
        {quantityCount}
        <FontAwesomeIcon icon={faMinus} onClick={decrementQuantity}/>
      </div>
    </div>
  )
}

export default YourComponent;

问题核心是你把单价和总售价混存在了sellingPrice状态里，且只有输入单价时才计算一次总售价，数量变化时没有触发重新计算。

修改步骤与代码示例 #

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrashCan, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';

const YourComponent = () => {
  const [productName, setProductName] = useState("");
  const [unitPrice, setUnitPrice] = useState(0); // 单独存单价
  const [quantityCount, setQuantityCount] = useState(0);
  const [newItems, setNewItems] = useState([]);

  const enterProductName = (e) => {
      setProductName(e.target.value);
  };

  const enterUnitPrice = (e) => {
      // 转成数字类型，避免字符串相乘的错误
      setUnitPrice(Number(e.target.value));
  };

  const handleSaveItem = () => {
      // 保存时计算总售价
      const totalPrice = unitPrice * quantityCount;
      const newItemData = { productName, totalPrice, quantityCount, unitPrice };
      setNewItems([...newItems, newItemData]);
  };

  const incrementQuantity = () => {
      // 用函数式更新确保拿到最新状态值
      setQuantityCount(prev => prev + 1);
  };

  const decrementQuantity = () => {
      // 限制数量不能为负数
      setQuantityCount(prev => Math.max(prev - 1, 0));
  };

  // 实时计算当前总售价，无需存状态
  const currentTotalPrice = unitPrice * quantityCount;

  return (
    <div>
      <input 
        type="text" 
        value={productName} 
        onChange={enterProductName} 
        placeholder="产品名称"
      />
      <input 
        type="number" 
        value={unitPrice} 
        onChange={enterUnitPrice} 
        placeholder="单价"
      />
      {/* 实时显示当前总价 */}
      <div>当前总价：{currentTotalPrice}</div>
      <button onClick={handleSaveItem}>保存商品</button>

      <div>Items</div>
      {newItems.map((item, index) => (
        <div key={index}>
          <div>
            <div>{item.productName}</div>
            <div>总价：{item.totalPrice} | 数量：{item.quantityCount}</div>
          </div>
          <div><FontAwesomeIcon icon={faTrashCan} /></div>
        </div>
      ))}

      <div>Quantity</div>
      <div>
        <FontAwesomeIcon icon={faPlus} onClick={incrementQuantity}/>
        {quantityCount}
        <FontAwesomeIcon icon={faMinus} onClick={decrementQuantity}/>
      </div>
    </div>
  );
};

export default YourComponent;

关键修改说明 #

• 拆分unitPrice（单价）和实时计算的currentTotalPrice（当前总价），避免状态混淆
• 使用函数式更新修改数量，确保每次都能获取到最新的状态值
• 单价输入时转成数字类型，防止字符串相乘导致的逻辑错误（比如"2"*3会变成"222"，转数字后才是6）
• 增加数量最小值限制，避免出现负数
• 保存商品时再计算总售价，或者渲染时实时计算，彻底解决状态不同步问题

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