React Native购物车问题：无法将数据传递至购物车页面

Hey，我看你遇到的问题是点击加入购物车按钮时，虽然购物车图标计数能更新，但商品数据没正确传递到购物车页面，控制台还出现了未知值数组。咱们来一步步排查解决：

核心问题：按钮的onPress传参错误 #

React Native的onPress回调函数默认接收的是点击事件对象，而不是你预想的商品名称。你现在写的(name) => this.props.addItemsToCart(name)里，name其实是事件对象（比如包含点击坐标、元素信息的对象），不是你要传递的商品名称，这就是为什么dispatch的payload会变成未知值数组。

快速修复：正确传递商品名称 #

如果你的按钮是在商品列表中渲染的（每个按钮对应一个商品），需要直接把当前商品的name作为参数传入，修改按钮代码如下：

// 假设你在循环渲染商品，item是当前遍历到的商品对象
<Button 
  icon="cart" 
  mode="contained" 
  onPress={() => this.props.addItemsToCart(item.name)} 
  style={styles.btn}
>
  加入购物车
</Button>

这里用箭头函数包裹回调，直接传入正确的商品name，不再依赖onPress的默认参数。

额外验证点：检查Redux Reducer的处理逻辑 #

虽然计数更新了，但也要确保Reducer正确处理了ADD_TO_CART action，比如：

const initialState = {
  cartItems: [],
  cartCount: 0
};

const cartReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'ADD_TO_CART':
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload], // 确保把正确的name添加到数组
        cartCount: state.cartCount + 1
      };
    default:
      return state;
  }
};

确认Reducer里是将action.payload（也就是正确的商品名称）添加到cartItems数组中，而不是处理了错误的事件对象值。

调试小技巧 #

可以在mapDispatchToProps里加个日志，验证传递的参数是否正确：

const mapDispatchToProps = (dispatch) => { 
  return { 
    addItemsToCart:(name) => {
      console.log('要添加的商品名称：', name); // 检查这里的输出是否是你预期的商品名
      dispatch({type:'ADD_TO_CART',payload:name}) 
    } 
  } 
}

如果这里打印的是正确的商品名称，那问题可能出在购物车页面的取值逻辑上；如果还是未知值，那就是按钮传参的问题还没解决。

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