React中onPress如何同时调用两个函数？实现立即购买按钮

我来帮你搞定这个问题～你现在的写法之所以失效，是因为直接把两个函数写在onPressBuyNow里，JavaScript不会自动依次执行它们，反而会因为语法问题或者仅执行最后一个函数，导致addToCart根本没被调用。下面给你两种可行的解决方案：

方案1：简单包裹箭头函数（同步执行） #

如果不需要等待商品成功加入购物车再导航，可以直接把两个逻辑包在一个箭头函数里，依次调用：

<FooterProduct
  isAddToCart={isAddToCart}
  onPressAddCart={this.addToCart}
  onPressBuyNow={() => {
    // 先调用添加购物车函数
    this.addToCart();
    // 再导航到购物车页面
    navigation.navigate(homeTabs.cart);
  }}
/>

不过这种方式有个小问题：如果addToCart里的dispatch是异步操作，可能会出现“还没完成添加就跳转到购物车”的情况，用户体验不太好。所以更推荐下面的方案。

方案2：等待添加完成后再导航（异步优化） #

利用你addToCart函数里的dispatch回调，我们可以修改函数逻辑，让它支持传入一个“完成回调”，只有当商品成功加入购物车后再执行导航：

第一步：修改addToCart函数 #

给addToCart添加一个可选的onComplete参数，在dispatch的回调里执行它：

addToCart = (onComplete) => {
  const {product, quantity, variation, meta_data} = this.state;
  const {dispatch} = this.props;
  let check = true;

  // 原有的变体检查逻辑不变
  if (product.get('type') === productType.VARIABLE) {
    const attributeProduct = product
      .get('attributes')
      .filter(attr => attr.get('variation'));
    if (!meta_data.size || attributeProduct.size !== meta_data.size) {
      check = false;
      showMessage({
        message: 'Please select variations',
        type: 'danger',
      });
    }
  }

  if (check) {
    dispatch(
      addToCart(
        {
          product_id: product.get('id'),
          quantity,
          variation,
          product,
          meta_data,
        },
        () => {
          this.setState({isAddToCart: true});
          // 如果传入了完成回调，就执行它
          if (typeof onComplete === 'function') {
            onComplete();
          }
        },
      ),
    );
  }
};

第二步：修改onPressBuyNow的绑定 #

现在可以在调用addToCart时传入导航逻辑作为回调，确保只有添加成功后才跳转：

<FooterProduct
  isAddToCart={isAddToCart}
  onPressAddCart={this.addToCart}
  onPressBuyNow={() => {
    this.addToCart(() => {
      // 仅当商品成功加入购物车后，才导航到购物车页面
      navigation.navigate(homeTabs.cart);
    });
  }}
/>

这样处理的好处是：如果用户没选变体（check失败），不会触发导航，只会弹出提示；只有当商品成功加入购物车后，才会跳转到购物车页面，逻辑更严谨，用户体验也更好。

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