Stripe + React 出现无效的钩子调用错误

Question

在 Stripe + React 中构建付款。我在官方文档中使用了该示例，但它不起作用。付款表单有效，但提交结帐按钮时出现invalid hook call 错误。

错误：

未捕获（承诺中）错误：无效的挂钩调用。 Hooks 只能在函数组件内部调用。

代码：

import React, { Component } from "react";
import {
  Elements,
  useStripe,
  useElements,
  CardElement,
} from "@stripe/react-stripe-js";
import { stripePromise } from "../../config/stripe";

handleStripe = async (event) => {
  const stripe = useStripe();
  const elements = useElements();

  event.preventDefault();
  console.log("event", event);
  const { error, paymentMethod } = await stripe.createPaymentMethod({
    type: "card",
    card: elements.getElement(CardElement),
  });
};

render() {
  return (
    <Elements stripe={stripePromise}>
      <CardElement />
        <button
          onClick={() => this.handleStripe()}
        >
          <span>
            Checkout
          </span>
        </button>
    </Elements>
  )
}

Answer 1

React 钩子仅适用于函数式组件。

Only call hooks from react functions

它们不适用于基于类的组件。

Only call hooks at the top level

不要在循环、条件或嵌套函数中调用 Hooks。 相反，请始终在 React 函数的顶层使用 Hooks。

不能在handleStripe 回调中定义useState 和useElements。

将逻辑转换/分解为一个小的功能组件。 将钩子移到主函数体中。

import React from "react";
import {
  Elements,
  useStripe,
  useElements,
  CardElement,
} from "@stripe/react-stripe-js";
import { stripePromise } from "../../config/stripe";

const StripeComponent = props => {
  const stripe = useStripe();
  const elements = useElements();

  const handleStripe = async (event) => {
    event.preventDefault();
    console.log("event", event);
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: elements.getElement(CardElement),
    });
    // do something with error or paymentMethod?
  };


  return (
    <Elements stripe={stripePromise}>
      <CardElement />
        <button onClick={handleStripe} >
          <span>
            Checkout
          </span>
        </button>
    </Elements>
  );
}