React Native（Expo开发）如何将勾选商品传递到购物车页面

实现方案（基于你当前使用的React Navigation路由） #

你现有代码的商品勾选逻辑已经开发完成，只需要筛选出用户勾选的商品，通过路由参数传递到购物车页面即可，修改步骤如下：

• 第一步：在Pulsars类中新增筛选已勾选商品的方法

getCheckedItems = () => {
  // 过滤所有checked为1的商品，即为用户勾选的内容
  return this.state.cartItems.filter(item => item.checked === 1)
}

• 第二步：修改底部「Add to Cart」按钮的点击事件
  把原来的测试点击逻辑替换为跳转逻辑，假设你的购物车页面路由名为Cart，如果你的实际路由名不同，替换成自己的即可：

onPress={() => {
  const checkedItems = this.getCheckedItems()
  // 空校验，避免用户未选商品直接点击按钮
  if(checkedItems.length === 0) {
    Alert.alert('提示', '请先选择需要添加的商品')
    return
  }
  // 将勾选的商品通过路由参数传递给购物车页面
  this.props.navigation.navigate('Cart', { selectedProducts: checkedItems })
}}

• 第三步：在购物车页面接收传递的商品数据
  如果购物车是类组件，直接在组件内获取参数即可：

// 放在render或者componentDidMount生命周期中都可以
const selectedProducts = this.props.route.params?.selectedProducts || []
// 拿到数据后存入购物车页面的state，直接渲染即可

多页面共享购物车数据方案 #

如果你的APP需要在多个页面修改、查看购物车数据，建议使用全局状态管理，避免每次跳转都传递参数：

• 轻量项目可以直接用React自带的Context API，创建全局的购物车上下文，封装加购、删除、清空购物车的方法，所有页面都可以直接调用和订阅购物车数据
• 业务复杂需要持久化的项目，推荐用Zustand/Redux，还可以配合AsyncStorage把购物车数据存在本地，用户关闭APP再打开数据也不会丢失

现有代码bug修复 #

你当前代码有两个小问题可以顺手修改，避免后续报错：

1. deleteHandler方法里的setState写法错误，把this.setState(updatedCart)改成this.setState({ cartItems: updatedCart })，否则删除商品会触发状态异常
2. selectHandlerAll方法里遍历数组用forEach即可，不需要用map，不会影响功能但写法更规范

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