Plaid Link 中的 onSuccess 回调未更新

Question

我使用 react-plaid-link 构建了一个 PlaidLink 组件，如下所示。使用标准方式构建时没有问题 - 仅将 public_token 和 account_id 传递给请求正文。

但是，当我尝试将stripeUid传递给请求体时，只传递了一个空字符串（stripeUid状态的初始值）。尽管 stripeUid 的值已被更新并通过 props 从父级正确传递，但仍存在这种情况。由于某些原因 stripeUid 不会在 useCallback 挂钩内更新，即使该值在依赖项数组中也是如此。

知道为什么值没有更新吗？

function PlaidLink(props) {
  const [token, setToken] = useState("");
  const { achPayments, stripeUid } = props;

  async function createLinkToken() {
    const fetchConfig = {
      method: "POST",
    };
    const response = await fetch(
      API_URL + "/plaid/create-link-token",
      fetchConfig
    );
    const jsonResponse = await response.json();
    const { link_token } = jsonResponse;
    setToken(link_token);
  }

  const onSuccess = useCallback(
    (publicToken, metadata) => {
      const { account_id } = metadata;

      // Exchange a public token for an access one.
      async function exchangeTokens() {
        const fetchConfig = {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            public_token: publicToken,
            account_id,
            stripeUid,
          }),
        };
        const response = await fetch(
          API_URL + "/plaid/exchange-tokens",
          fetchConfig
        );
        const jsonResponse = await response.json();
        console.log("Exchange token response:", jsonResponse);
      }

      exchangeTokens();
    }, [stripeUid]
  );

  const { open, ready } = usePlaidLink({
    token,
    onSuccess,
  });

  // get link_token from your server when component mounts
  useEffect(() => {
    createLinkToken();
  }, []);

  useEffect(() => {
    if (achPayments && ready) {
      open();
    }
  }, [achPayments, ready, open]);

  return <div></div>;
}

export default PlaidLink;

Answer 1

我不熟悉 Stripe API 但是通过阅读代码我发现代码可能存在问题。

按照事件链，有一个 usePlaidLink 和两个 useEffects。当组件安装时，它在一个效果中 createLinkToken 而在另一个效果中 open （假设它是 ready）。

但是，当 stripeUid 发生变化时，它不会 re-fire 产生影响。所以，这对我来说是一个提示。

接下来，在这里查看 usePlaidLink 的来源： https://github.com/plaid/react-plaid-link/blob/master/src/usePlaidLink.ts 给了我一个想法：当 options.onSuccess 改变时它不做任何事情，只有当 options.token 改变时.这是他们的依赖数组：

[loading, error, options.token, products]

所以看起来你的代码就反应中的效果而言是正确的，但它不能一起工作，因为改变 onSuccess 没有做任何事情。

如何解决：

向开源库发出拉取请求以解决那里的问题
将该库内联到您的代码中并自行修复
当 uid 更改时使用“keyed components”卸载并重新安装组件而不是更新来解决问题
一些其他解决方案

Plaid Link 中的 onSuccess 回调未更新

onSuccess callback in Plaid Link not updating

reactjs

react-hooks

plaid

usecallback