React实现购物车选中商品价格求和时的父子组件传值问题

嘿，我看了你的购物车代码，核心问题在于你当前的handleChange只能拿到复选框的事件对象，没法直接获取对应的商品数据对吧？其实很容易解决，咱们只需要在子组件的回调里把对应的item数据一起传给父组件就行，我给你详细说下修改方案：

方案步骤 #

1. 修改子组件的onChange回调，传递商品数据 #

在Item组件里，我们需要把handleChange包装一层箭头函数，同时传入事件对象和当前的item：

const Item = ({ item, handleChange }) => { 
  return ( 
    <div> 
      <input 
        type="checkbox" 
        name={item.name} 
        onChange={(event) => handleChange(event, item)} // 这里添加item参数
      /> 
      {item.name} ${item.price} 
    </div> 
  ); 
}; 
export default Item;

2. 改造父组件的handleChange函数，接收商品数据 #

现在父组件的handleChange可以拿到事件和对应的商品了，接下来就可以根据复选框的状态来添加或移除商品：

export default function App() { 
  const allItems = AllItems; 
  const [orderedItems, setOrderedItems] = useState([]); 

  const handleChange = (event, item) => { 
    if (event.target.checked) { 
      // 用函数式更新，基于最新状态添加商品
      setOrderedItems(prevOrdered => [...prevOrdered, item]);
    } else { 
      // 过滤掉要移除的商品，这里用name作为唯一标识（如果有id用id更好）
      setOrderedItems(prevOrdered => prevOrdered.filter(i => i.name !== item.name));
    } 
  }; 

  return ( 
    <div className="App"> 
      {allItems.map((item) => ( 
        <Item item={item} key={item.name} handleChange={handleChange} /> 
      ))} 
      <div> 
        Total ={" "} 
        {orderedItems.length === 0 ? "0" : orderedItems.reduce((acc, item) => { 
          return acc + Number(item.price); 
        }, 0)} 
      </div> 
    </div> 
  ); 
}

关键说明 #

• 函数式状态更新：我用了setOrderedItems(prev => ...)的写法，这是因为React的状态更新是异步的，用函数式更新能确保我们基于最新的状态来修改数组，避免出现状态不同步的问题。
• 商品唯一标识：示例里用item.name来判断要移除的商品，如果你的商品有唯一id，建议用id来过滤，这样更严谨（毕竟可能存在同名商品）。

这样修改后，当你勾选或取消复选框时，对应的商品数据就会正确传入父组件，orderedItems数组也会实时更新，总价计算自然就正常工作啦～

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