分派 HTTP 请求的链接在 Razorpay React 中不起作用

Question

在开始之前，我对

redux

非常陌生，并且总体上对

React

也很陌生。我正在将 Razorpay 的

Subscription

功能集成到应用程序中。一切工作正常，但是当我尝试链接 HTTP 端点的

dispatch

时，它不起作用。这是代码片段：

const SubscriptionForm: FC<ISubscriptionForm> = ({ planId, totalCount }) => {

  const { data: user, isFetching } = useAppSelector((store) => store.user.details);

  const dispatch = useAppDispatch();
  const [Razorpay] = useRazorpay();

  const handlePayment = async (subscription_id: any, userDetails: { name: string; email: string; phone: string}) => {


    const options: any = {
      key: process.env.REACT_APP_RAZORPAY_ID,
      amount: "500",
      currency: "USD",
      name: "Test App",
      description: "Test Transaction",
      image: Logo,
      subscription_id: subscription_id,
      handler: (razaorpayResponse: {
        razorpay_payment_id: any;
        razorpay_subscription_id: any;
        razorpay_signature: any;
      }) => {
        dispatch(SubscriptionRestService.verifySignature({ razaorpayResponse}))
          .then((response) => {
            if (SubscriptionRestService.verifySignature.fulfilled.match(response)) {
              console.log("Success:", response);
              dispatch(SubscriptionRestService.updateSubscriptionStatus({ subscriptionId: subscription_id, status: "active" }))
                .then((response) => {
                  if (SubscriptionRestService.updateSubscriptionStatus.fulfilled.match(response)) {
                    console.log("Success:", response);
                    toast.success("Subscription was activated successfully");
                  } else {
                    console.error("Error:", response);
                    toast.error("Subscription activation may have failed. Please contact support if payment was deducted");
                  }
                })
                .catch((error) => {
                  console.error("Error:", error);
                });
              toast.success("Subscription was activated successfully");
            } else {
              console.error("Error:", response);
              toast.error("Subscription may have failed. Please contact support if payment was deducted");
            }
          })
          .catch((error) => {
            console.error("Error:", error);
          });
      },
      theme: {
        color: "#e9e6e6",
      },
      prefill: {
        name: userDetails.name,
        email: userDetails.email,
        contact: userDetails.phone,
      }
    };
    const rzp1 = new Razorpay(options);

    rzp1.open();
  }

只要我删除内部调度，这个东西就可以正常工作：

dispatch(SubscriptionRestService.updateSubscriptionStatus({ subscriptionId: subscription_id, status: "active" }))

但是当我添加内部调度时，它会给出

Invalid Hook Call

错误

我想摆脱这个错误并让

chained dispatch

正常工作。 2次派遣

asyncThunks

如下：

const verifySignature = createAsyncThunk(
  'subscription/verify_signature',
  async (args:{razaorpayResponse: {
    razorpay_payment_id: any;
    razorpay_subscription_id: any;
    razorpay_signature: any;
  }}, { rejectWithValue }) => {
    try {
      return (await HttpClient.post('/payment/verify-signature', args.razaorpayResponse)).data;
    } catch (error: any) {
      return rejectWithValue(error.message);
    }
});

const updateSubscriptionStatus = createAsyncThunk(
  'subscription/update_status',
  async (args: { subscriptionId: any, status: any }, { rejectWithValue }) => {
    try {
      return (await HttpClient.post('/payment/update-subscription-status', args)).data;
    } catch (error: any) {
      return rejectWithValue(error.message);
    }
});

verifySignature

工作正常，但是当我派遣

updateSubscriptionStatus

时它失败了。

Answer 1

错误出现在

console.error

语句处。将

console.error("Error:", response);

更改为

console.error("Error:", response.error);

解决了问题。