如何正确地使用异步值(Reactjs)加载全局变量? [英] How to properly load global variable with async values(Reactjs)?

问题描述

我正在尝试解决似乎无法使用Stripe的API解决的问题

I'm trying to solve this problem that I can't seem to solve with stripe's API's

因此，当使用他们的新版本API创建费用时，他们说在前端我们应该致电

So when creating a charge with their new version API they say that in the front end we should call

loadStripe('publishable Key',{'Connected account ID'})

并将其设置为常量.

现在我不理解我们应该如何获取存储在某个数据库(例如数据库)中的ID?

now I dont undestand how are we supposed to get the ID that is stored somewhere say a database?

作为参考，请查看此处(在步骤3中...)

As a reference please look at this and here (In Step 3 ...).

我目前正在做的事情是这样的

What I'm currently doing is something like this

import React from "react";
import ReactDOM from "react-dom";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "./CheckoutForm";

//btw I have set this to const and to let and none work
const stripePromise = fetch("url", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    anything: window.sessionStorage.getItem("Variable Account")
    //here store something that  will tell what account to pull ID data from
  })
})
  .then(data => data.json())
  .then(result => {
    return loadStripe("KEY", { stripeAccount: result });
  });

class App extends React.Component {
  render() {
    return (
      <Elements stripe={stripePromise}>
        <CheckoutForm />
      </Elements>
    );
  }
}

export default App;

但是，如果按照

myapp.com/home  

->单击

myapp.com/home/something  

->然后

myapp.com/home/something/payment 

条带未加载，但现在可以刷新浏览器了，但是这告诉我我做错了，还是必须在"componentDidMount()"中刷新应用程序?

stripe is not loading but one refreshes the browser now works but that tells me I'm doing maybe something wrong or I have to make the app refresh in 'componentDidMount()' maybe?

一个人可以将其设置为静态，但是关联帐户可以很多，因此如果有人可以帮助我，我将不胜感激

One can set it to be static but connected accounts can be many so if anyone can help me with this I would appreciate it

推荐答案

通常，您希望在应用程序中使用此帐户ID.但是，如果需要检索它，那很好，但是请确保stripePromise是您认为的样子.例如，我可以在这里通过以下模拟提取调用来使其工作: https://codesandbox.io/s/stripe-connect-w-resolve-wts34

Generally, you'd want to have this account ID available in your app. But if you need to retrieve it, that's fine, but make sure the stripePromise is what you think it is. For example, I can make this work here with a simulated fetch call here: https://codesandbox.io/s/stripe-connect-w-resolve-wts34

请注意，我正在明确管理Promise:

Note that I'm managing the Promise explicitly:

const stripePromise = new Promise((resolve, reject) => {
  fetch(...)
  .then(data => data.json())
  .then(result => {
    resolve(
      loadStripe(STRIPE_PUBKEY, { stripeAccount: "acct_xxx" })
    );
  });
});

您描述的导航中断的事实表明您可能路由不正确.如果这是单页应用程序，则导航不应导致App组件重新呈现.

The fact that you describe this breaking with navigation suggests you might be routing incorrectly. If this is a single page app, the navigation shouldn't cause the App component to re-render.

这篇关于如何正确地使用异步值(Reactjs)加载全局变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！