React.js Redux Reducer未正确插入商品问题求助

嘿，我一眼就瞅到问题所在啦！你购物车状态里存的不是商品数据，而是鼠标点击的事件对象，根源出在你的Item组件（哦对，你组件名写成Etem啦，先记下来这个小拼写错误）的点击事件绑定上。

错误原因 #

在showItems方法里，你渲染每个商品div时是这么写的：

return items.map(items => <div key={items.id} onClick={addToCartAction}>{items.name}</div>);

这里有两个核心问题：

1. 循环变量命名重复：外层数据源是items，循环里又用items作为当前项的变量名，很容易混淆，建议改成item
2. 最关键的点：onClick={addToCartAction}这种写法，React会自动把点击事件对象作为参数传给addToCartAction，而不是你需要的当前商品item。这就导致你的addToCart action接收的是事件对象，最终reducer把事件对象存进了状态里，而不是商品数据。

修复方案 #

修改showItems方法，用箭头函数包裹点击事件，手动传入当前商品item，同时修正变量名：

showItems = () => {
  const { items, addToCartAction } = this.props;
  console.log("ITEMS", items);
  // 把循环变量改成item，避免和外层items混淆
  return items.map(item => (
    <div key={item.id} onClick={() => addToCartAction(item)}>{item.name}</div>
  ));
};

另外记得把组件名Etem改成Item，避免后续出现不必要的bug：

// 原来的错误写法
export class Etem extends Component { ... }
// 改成
export class Item extends Component { ... }

// 底部的connect也要对应修改
export default connect(mapStateToProps, mapDispatchToProps)(Item);

为什么这样改？ #

用箭头函数() => addToCartAction(item)包裹后，点击事件触发时会主动把当前的item作为参数传给addToCartAction，这样你的action就能拿到正确的商品数据，reducer也就能把商品正常添加到购物车状态里啦。

你可以再控制台打印一下action.payload，现在应该能看到正确的商品对象了～

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