React 格子 Link 加载格子 Null 时出错
React Plaid Link Error Loading Plaid Null
我这辈子都弄不明白这里出了什么问题。我检查了一些问题,似乎错误加载格子 null 过去一直是一个问题。我能够成功创建 link 令牌并在传递到 PlaidLink 之前显示它。 PlaidLink 按钮保持禁用状态,在控制台中我收到错误加载格子 null。我错过了什么?这是 Plaid 文档的 link。 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
中缺少脚本标记
我这辈子都弄不明白这里出了什么问题。我检查了一些问题,似乎错误加载格子 null 过去一直是一个问题。我能够成功创建 link 令牌并在传递到 PlaidLink 之前显示它。 PlaidLink 按钮保持禁用状态,在控制台中我收到错误加载格子 null。我错过了什么?这是 Plaid 文档的 link。 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
中缺少脚本标记