React中使用setState更新数组对象quantity属性的问题求助

你遇到的核心问题是错误地使用了扩展运算符追加新对象，而不是修改数组中对应位置的元素。原来的代码会把一个新的错误对象添加到数组末尾，而不是更新目标元素的quantity属性。下面是修正后的完整方案：

1. 修正加号按钮的点击事件 #

把原来的错误替换逻辑改成遍历数组并更新对应元素：

<svg 
  onClick={() => {
    setMyItems(prevState => {
      return prevState.map(item => {
        // 匹配当前点击的商品id
        if (item.id === value.id) {
          // 复制原对象，仅更新quantity属性（+1）
          return {
            ...item,
            quantity: item.quantity + 1
          };
        }
        // 其他商品保持不变
        return item;
      });
    });
  }} 
  id='add' 
  xmlns="http://www.w3.org/2000/svg" 
  width="28" 
  height="23" 
  fill="currentColor" 
  className="bi bi-plus" 
  viewBox="0 0 16 16"
>
  <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>

2. 修正减号按钮的点击事件 #

逻辑和加号类似，只是数量减1，同时添加防负数判断：

<svg 
  onClick={() => {
    setMyItems(prevState => {
      return prevState.map(item => {
        // 匹配id且数量大于1时才允许减少
        if (item.id === value.id && item.quantity > 1) {
          return {
            ...item,
            quantity: item.quantity - 1
          };
        }
        return item;
      });
    });
  }} 
  xmlns="http://www.w3.org/2000/svg" 
  width="32" 
  height="25" 
  fill="currentColor" 
  className="bi bi-dash" 
  viewBox="0 0 16 16"
>
  <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z" />
</svg>

3. 同步Input框与状态（可选优化） #

原来的defaultValue只会初始化一次，建议改成value绑定状态，并添加手动输入修改的逻辑，让输入框和状态实时同步：

<input 
  value={value.quantity} 
  className='w-25 h-75 text-center' 
  onChange={(e) => {
    const newQuantity = parseInt(e.target.value);
    // 验证输入是有效的正整数
    if (!isNaN(newQuantity) && newQuantity > 0) {
      setMyItems(prevState => {
        return prevState.map(item => {
          if (item.id === value.id) {
            return {...item, quantity: newQuantity};
          }
          return item;
        });
      });
    }
  }}
/>

核心原理说明 #

• 遵循React状态不可变原则：永远不要直接修改原状态数组/对象，而是通过复制生成新的状态。
• 使用prevState.map遍历数组：对每个元素判断是否需要更新，需要更新的元素用...item复制所有属性后覆盖目标属性，不需要的直接返回原元素。
• 通过item.id === value.id精准定位要修改的元素，确保只更新点击的商品数量。

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