Блог

Я ни за что на свете не могу понять, что здесь не так. Я проверил некоторые проблемы, и, похоже, ошибка загрузки plaid null была проблемой в прошлом. Я могу успешно создать маркер ссылки и отобразить его перед переходом в PlaidLink. Кнопка PlaidLink остается отключенной, и в консоли я получаю сообщение об ошибке загрузки plaid null. Чего мне не хватает? Вот ссылка на документы Plaid. https://github.com/plaid/react-plaid-link

Я использую «react-plaid-link»: «^3.2.0»

Вот мой код.

 import React, { useCallback, useState, FunctionComponent, useEffect } from "react";
import { usePlaidLink, PlaidLinkOptions, PlaidLinkOnSuccess } from "react-plaid-link";
// @ts-ignore
//import { PlaidLinkOnSuccess } from "react-plaid-link/src/types/index.ts";



interface Props {
  token: string;
}

const PlaidLink: FunctionComponent<Props> = ({ token }) => {


  const onSuccess = useCallback<PlaidLinkOnSuccess>(
(public_token: any, metadata: any) => {
  // send public_token to server
  const setToken = async () => {
    console.log("token sending to server for exchange")
    const response = await fetch("/api/set_access_token", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
      },
      body: `public_token=${public_token}`,
    });
  };
},
[]
  );

  const config: PlaidLinkOptions = {
token,
onSuccess,
// onExit
// onEvent
  };



  const { open, ready, error } = usePlaidLink(config);

  return (
<div>
  <p>{token}</p>
  <button
    onClick={() => open()}
    disabled={!ready}
  >
    Connect a bank account
  </button>
</div>
  );
};


const PrePlaid: FunctionComponent = () => {
  const [token, setToken] = useState<string | null>(null);

  // generate a link_token
  React.useEffect(() => {
async function createLinkToken() {
  let response = await fetch("/api/create_link_token");
  const { link_token } = await response.json();
  console.log("this is the link token"   link_token);
  setToken(link_token);
}
console.log("this should happen first")
createLinkToken();
  }, []);

  // only initialize Link once our token exists
  return token === null ? (
// insert your loading animation here
<div className="loader"></div>
  ) : (
  <PlaidLink token={token} />
  );
    }

export default PrePlaid;
 

отсутствовал тег сценария в index.html