javascript - React - 需要帮助将路径转换为字符串，以便用户在单击 img 时被重定向到 Stripe

Question

所以让我解释一下发生了什么。我调用了这个组件PaymentAccountLandingPage，并在该组件中导入并渲染了这个组件ConnectedAccountsButton，它是我使用 Stripe 图像创建的 Stripe 按钮，基本上使它就像按钮一样。因此，我希望用户在单击时被重定向到登录页面，以便使用 Stripe 创建帐户img/button。问题是我需要进行 axios 调用，createAcctLink以便它返回一个路径名，其中包含accountId我需要在路径中具有的路径名（我显然在下面的 acctId 中使用了 XXXXXX）。但是我需要路径中的该信息，因为我团队中的其他人稍后会在他们被重定向回来时解析问题是来自response.item以下的响应数据：

https://connect.stripe.com/express/onboarding/XXXXXXXXXXXX

请注意，它不是字符串，我什至使用该toString方法尝试将其转换为字符串，但没有运气。有人有其他解决方案吗？我不想使用window.location.assign()，或者window.location.href因为我已经知道如何这样做，但我想找出另一种方法的原因是因为将用户重定向到 Stripe 需要 10-15 秒。我想使用的原因Link react-router-dom是因为它很快，而且我知道也有，Redirect但无论哪种方式，我都需要将路径作为字符串，所以这是我的问题。如果有人有任何很棒的解决方案或解决方法。这是我的ConnectedAccountsButton：

import React from "react";
import connectbutton from "@assets/images/stripe/ConnectedAccountsButton.png";
import { createAccountLink } from "../../services/connectedAccountsService";
import { Link } from "react-router-dom";

class ConnectedAccountsButton extends React.Component {
  state = {
    path: "",
  };

  componentDidMount() {
    createAccountLink()
      .then(this.onAccountLinkSuccess)
      .catch(this.onAccountLinkError);
  }

  onAccountLinkSuccess = (response) => {
    let pathUrl = response.item.toString();
    console.log("Success Response:", pathUrl);
    this.setState(() => {
      return {
        path: pathUrl,
      };
    });
  };

  onAccountLinkError = (err) => {
    console.error("Error Response: ", err);
  };

  render() {
    return (
      <Link to={this.state.path}>
        <img
          src={connectbutton}
          style={{ width: "200px", cursor: "pointer" }}
          alt="Connected Accounts Link"
        />
      </Link>
    );
  }
}

export default ConnectedAccountsButton;

标签： javascriptreactjsaxiosreact-routerstripe-payments

Answer 1

我正在回答我自己的问题，因为我在朋友的帮助下找到了解决方案。奇怪的是我们用过typeof它response.item，它已经是一个字符串。没有理由这不应该奏效，但它没有。我们甚至检查了 React 开发工具，确定状态是正确的路径，但由于某种原因，当我单击img它时，它会将我发送到我的错误路径之一。

这就是最终的工作：

import React, { useState, useEffect } from "react";
import connectbutton from "@assets/images/stripe/ConnectedAccountsButton.png";
import { createAccountLink } from "../../services/connectedAccountsService";
import debug from "sabio-debug";
import { useHistory } from "react-router-dom";

const _logger = debug.extend("ConnectedAccountsButton");

const ConnectedAccountsButton = () => {
  const [url, setUrl] = useState("");
  const history = useHistory();

  useEffect(() => {
    createAccountLink().then(onAccountLinkSuccess).catch(onAccountLinkError);
  }, []);

  const redirectConnectedAccount = () => {
    history.push(url);
  };

  const onAccountLinkSuccess = (response) => {
    _logger("Success Response", response.item);
    setUrl(response.item);
  };

  const onAccountLinkError = (err) => {
    _logger("Error Response", err);
  };

  return (
    <img
      src={connectbutton}
      style={{ width: "200px", cursor: "pointer" }}
      alt="Connected Accounts Link"
      onClick={redirectConnectedAccount}
    />
  );
};

export default ConnectedAccountsButton;