React购物清单：优化状态更新逻辑与子组件同步问题

你当前代码里直接修改原state对象（item.amount = item.amount + amount）违反了React状态不可变性原则，这也是你之前直接用setShoppingList(items)时子组件不更新的核心原因——数组引用未发生变化，React的浅比较机制检测不到状态更新，因此不会触发重渲染。

下面是优化后的addHandler写法，用更直观的数组map方法处理，同时严格遵循状态不可变性：

const addHandler = ({title, amount}) => {
  setShoppingList(prevList => {
    // 检查是否存在同名商品
    const hasExistingItem = prevList.some(item => item.title === title);
    
    if (hasExistingItem) {
      // 遍历生成新数组，仅更新匹配项的数量
      return prevList.map(item => 
        item.title === title 
          ? {...item, amount: item.amount + amount} // 创建新对象，不修改原数据
          : item
      );
    } else {
      // 添加新商品
      return [...prevList, {id: Math.random().toString(), title, amount}];
    }
  });
};

优化点说明： #

• 基于prevState更新：直接在setShoppingList中使用回调函数，依赖最新的前一次状态，避免闭包导致的状态过期问题。
• 保持状态不可变：更新已有商品时，用扩展运算符{...item}创建新对象，而非直接修改原state内的对象，确保状态变化可被React检测到。
• 代码更简洁直观：用map替代slice拼接数组的写法，逻辑一目了然，可读性大幅提升。

另外，你的removeHandler也可以优化为基于prevState的写法，避免依赖外部shoppingList变量：

const removeHandler = (removeId) => {
  setShoppingList(prevList => prevList.filter(item => item.id !== removeId));
};

子组件不更新的原因补充： #

React通过浅比较判断状态是否变化，如果直接修改原数组内的对象属性，数组本身的引用未改变，React会认为状态无变化，因此不会触发组件重渲染，子组件ShoppingList也就无法更新显示新的数量。而上述优化方法始终生成新数组或新对象，确保引用发生变化，React能正确检测到状态更新。

完整优化后的Shopping组件代码：

import React, { useState } from 'react';
import ShoppingForm from './ShoppingForm';
import ShoppingList from './ShoppingList';

function Shopping() {
  const [shoppingList, setShoppingList] = useState([]);

  const addHandler = ({title, amount}) => {
    setShoppingList(prevList => {
      const hasExistingItem = prevList.some(item => item.title === title);
      
      if (hasExistingItem) {
        return prevList.map(item => 
          item.title === title 
            ? {...item, amount: item.amount + amount}
            : item
        );
      } else {
        return [...prevList, {id: Math.random().toString(), title, amount}];
      }
    });
  };

  const removeHandler = (removeId) => {
    setShoppingList(prevList => prevList.filter(item => item.id !== removeId));
  };

  return (
    <div className="App">
      <ShoppingForm onAddItem={addHandler}/>
      <section>
        <ShoppingList items={shoppingList} onRemoveItem={removeHandler}/>
      </section>
    </div>
  );
}

export default Shopping;

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