React Native购物车页渲染时函数自动执行 onPress事件触发异常

当前onPress={removeItem(item.product.id)}的写法，会在组件渲染阶段直接执行removeItem函数，再把函数执行的返回值绑定给onPress属性，而不是把「点击触发时要执行的回调」传给onPress。所以进入购物车页渲染列表时，所有商品项的removeItem都会被直接调用，就出现了页面刚加载就打印全部商品ID的现象。

另外现有代码还有两处冗余问题：

• useMemo的依赖项设置为[removeItem]会造成循环依赖，这里完全不需要用useMemo包裹函数
• 传入的参数本身是单个商品ID，外层套[ids].map属于无意义操作

1. 重写removeItem函数 #

去掉多余的useMemo包裹，直接定义普通函数即可：

const removeItem = (targetId) => {
  console.log(targetId)
  // 后续在这里补充实际移除购物车商品的逻辑，比如更新本地状态、调用后端接口等
}

2. 修正onPress的传参写法 #

用箭头函数包裹removeItem调用，确保只有点击事件触发时才会执行函数传参：

<Pressable onPress={() => removeItem(item.product.id)}>
  <FontAwesomeIcon icon={faXmark} />
</Pressable>

// 函数定义部分
const removeItem = (targetId) => {
  console.log(targetId)
  // 补充移除商品的业务逻辑
}

// 列表渲染部分
<ScrollView>
    {cart?.map((item, i) => {
      return (
        <View style={styles.box} key={item.product.id}>
          <View style={styles.top} >
            <Text style={styles.itemname}>{item.product.itemname}</Text>
            <View style={styles.right}>
              <Text style={styles.qty}> {item.product.price}</Text>
              <Text style={styles.qty}> x {item.qty}</Text>
              <View>
                <Pressable onPress={() => removeItem(item.product.id)}>
                  <FontAwesomeIcon icon={faXmark} />
                </Pressable>
              </View>
            </View>
          </View>
          <Text style={styles.subTotal}>subTotal:  Ksh. {item.totalPrice}</Text>
        </View>
      )
    })}
</ScrollView>

优化提示：列表渲染的key属性建议使用商品唯一ID，不要用遍历索引i，避免列表增删改时出现渲染错位、状态绑定错误的问题。

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