如何使用异步值（Reactjs）正确加载全局变量？答案

【问题标题】：How to properly load global variable with async values(Reactjs)?如何使用异步值（Reactjs）正确加载全局变量？
【发布时间】：2020-03-09 06:22:39
【问题描述】：

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

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

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

并将其设置为 const。

现在我不明白我们应该如何获取存储在某个数据库中的 ID？

作为参考，请查看this 和here（在第 3 步中...）。

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

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;

但如果与应用程序的常规流程一起使用，则 const 似乎无法正确加载，例如来自

myapp.com/home

-> 点击

myapp.com/home/something

-> 然后

myapp.com/home/something/payment

stripe 未加载，但刷新浏览器现在可以工作，但这告诉我我可能做错了什么，或者我必须在 'componentDidMount()' 中刷新应用程序？

可以将其设置为静态，但连接的帐户可能很多，所以如果有人可以帮助我，我将不胜感激

【问题讨论】：

这能回答你的问题吗？ Stripe connected calls from the Front End, change the Stripe connected ID programatically
不，所以我又问了一遍
不是这样的。您不应该重新发布问题，因为它没有得到回答。您应该详细说明您的问题，以使人们更清楚地给出答案并使其成为可能的最佳问题。当您更新它时，它无论如何都会将bump 它排在active 问题的顶部。你也可以在这个问题上悬赏。
对不起，我是这个平台的新手，所以我会考虑悬赏，谢谢
@ShaunE.Tobias，你有没有见过这样的事情，或者我的方法不正确？我也尝试使用 this.setState() 来加载它，但是根据 Stripe 抛出的警告，一旦加载它就无法更改，他们建议将其保留在任何组件的渲染之外。

标签： javascript reactjs asynchronous async-await stripe-payments

【解决方案1】：

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

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

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

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

【讨论】：