В Stripe + React произошла недопустимая ошибка вызова ловушки - PullRequest
Новая
       9

В Stripe + React произошла недопустимая ошибка вызова ловушки

1 голос
/ 19 апреля 2020

Построение платежа в Stripe + React. Я использую пример в официальном документе, но он не работает. Форма оплаты работает, но при отправке кнопки оформления заказа возникает ошибка invalid hook call.

Ошибка:

Uncaught (в обещании) Ошибка: неверный вызов ловушки. Крючки можно вызывать только внутри тела компонента функции.

Код: 

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>
  )
}

1 Ответ

1 голос
/ 19 апреля 2020

Перехватчики React работают только в функциональных компонентах.

Только перехватчики вызовов из функций реагирования

Они не работают в компонентах на основе классов.

Только вызывать перехватчики на верхнем уровне

Не вызывать перехватчики внутри циклов, условий или вложенных функций. Вместо этого всегда используйте перехватчики в верхний уровень вашей функции React.

Не может быть определено useState и useElements в обратном вызове handleStripe.

Преобразование / коэффициент логики c в небольшой функциональный компонент. Переместите крючки в корпус основной функции. 

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>
  );
}
...