React useEffect with Stripe-异步获取客户端机密

Question

我在没有任何先验知识的情况下被扔进了一个react项目的中间，所以我确信这是重复的。

我想使用StripeElements，react库很简单。我只是不知道如何从服务器获取客户端机密。

这就是我正在尝试的：

const stripePromise = loadStripe('stripe_key');
const StripeForm = () => {
const [stripeData, setStripeData] = useState({});
const getClientSecret = async () => {
const { data } = await api.get(`payment/stripe/get-client-secret/`);
return data
}
useEffect(() => {
getClientSecret().then(data => setStripeData(data))
}, [])
if(stripeData.clientSecret) {
return (
<QuoteContainer title={"Pay With Credit Card"}>
<SectionCard>
{stripeData.clientSecret}
</SectionCard>
</QuoteContainer>
);
}
return (<b>Loading</b>)
}

路由payment/stripe/get-client-secret/返回一个具有密钥"clientSecret"的数组。此功能工作正常。

一旦承诺得到解决，我就无法将<b>Loading</b>文本替换为QuoteContainer组件。

Answer 1

如果您想渲染Loading组件。您必须为stripedData状态设置falsy值。因为{}值是真实的。所以我认为代码没有呈现Loading组件。加载组件不会被渲染，因为没有任何地方可以将其设置为false值。

Answer 2

您正在使用哪个AJAX库进行API调用？通常，您需要调用响应对象上的函数才能访问数据。例如，如果使用fetch()，则需要调用json()，然后访问响应数据。