如何使用 usePlaidLink 提供的 Plaid 退出功能？答案

【问题标题】：How do I use the Plaid exit function provided by the usePlaidLink?如何使用 usePlaidLink 提供的 Plaid 退出功能？
【发布时间】：2021-11-04 07:25:34
【问题描述】：

我正在开发一个应用程序，该应用程序会在指定的非活动时间后将用户注销。我有一个 AuthContext 来跟踪用户的身份验证状态。当应用程序使用来自react-plaid-link 的exit function 注销用户时，我尝试退出 PlaidLink 模式。问题是，调用 exit 函数什么也没做。这是我当前的实现。

import React, { useCallback, useEffect, useContext } from "react";
import { usePlaidLink } from "react-plaid-link";
import { LinkedAccountsDispatchContext } from "../hooks/linkedAccountsContext";
import { AuthContext } from "../hooks/authContext";
import Button from "../components/Button";

const PlaidLink = ({
  linkToken,
  updateMode,
  className,
  accountId,
  plaidButtonName = "Link accounts",
  onClick = () => {},
}) => {
  const { createLinkedItem, updateExpiredItem } = useContext(
    LinkedAccountsDispatchContext
  );
  const { logged } = useContext(AuthContext);
  async function handleSuccess(publicToken) {
    await createLinkedItem(publicToken);
  }
  async function handleUpdateSuccess() {
    await updateExpiredItem(accountId);
  }
  const onSuccess = useCallback(handleSuccess, [createLinkedItem]);
  const onUpdateSuccess = useCallback(handleUpdateSuccess, [
    accountId,
    updateExpiredItem,
  ]);
  const config = {
    token: linkToken,
    onSuccess: updateMode ? onUpdateSuccess : onSuccess,
  };
  const { open, ready, exit } = usePlaidLink(config);
  const handleClick = () => {
    onClick();
    open();
  };

  useEffect(() => {
    if (!updateMode || !ready) {
      return;
    }
    open();
  }, [ready, updateMode, open]);

  useEffect(() => {
    if (!logged) {
      // This does nothing.
      exit({ force: true });
    }
  }, [logged, exit]);

  return updateMode ? null : (
    <Button onClick={handleClick} disabled={!ready} className={className}>
      {plaidButtonName}
    </Button>
  );
};

export default PlaidLink;

请问在这种情况下使用退出函数的正确方法是什么？

更新：

试用 vanilla js 版本也会出现同样的问题。

const btn = document.querySelector('#btn');
const { open, exit } = Plaid.create({
  token: "GENERATED_LINK_TOKEN",
  onSuccess: (public_token, metadata) => {},
  onLoad: () => {},
  onExit: (err, metadata) => {},
  onEvent: (eventName, metadata) => {},
});

btn.addEventListener('click', async() => {
  open();
  setTimeout(() => {
    alert('...exiting');
    exit({
      force: true
    });
  }, 15000);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
  <title>Plaid Link Demo</title>
</head>

<body>
  <button id="btn">Link Account</button>
  <script type="module" src="./js/main.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript reactjs plaid

【解决方案1】：

从纯格子的角度来看，我认为您的退出呼叫没有任何问题。您是否确认（例如使用 console.log 语句）该行

exit({ force: true });

真的到达了吗？

【讨论】：

我可以确认它确实达到了。请注意，在香草 JS 版本中，我调用了警报。警报触发，但格子模式保持打开状态。

【解决方案2】：

由一位同事运行并得到了答案：

exit 函数确实被调用但不在 Plaid Link 上。我复制了这个，并且能够通过onEvent 回调触发它来调用exit()。由于onEvent 回调被传递到配置中，Link 能够看到并关闭模式。

当被要求澄清时，他补充说：我在文件顶部创建了一个名为 inactive 的状态，该状态最初设置为 false 并且在 onEvent() 回调中，当返回“OPEN”事件时，我将非活动状态触发为 true，只是为了模拟非活动用户.在创建配置之后，我使用了 useEffect() 钩子，并在其中放置了一个 setTimeout() 函数，如果 inactive 为真，则调用 exit()。因此 onEvent() 回调实际上反过来触发了 exit() 函数

const [inactive, setInactive] = useState(false);

  const onEvent = useCallback((event, metadata) => {
    console.log("onEvent", event, metadata);
    if (event === "OPEN") {
      setInactive(true);
    }
  }, []);

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

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

  useEffect(() => {
    if (inactive) {
      setTimeout(() => {
        exit();
      }, 5000);
    }
  });

【讨论】：

好吧。我不知道该怎么做。由于需要 config 才能从 plaid 获取退出函数，我如何才能在访问它之前调用它（退出）？
我更新了我的答案以包含更多详细信息和代码 sn-p——这有帮助吗？