如何从promise更新状态变量

Question

我正在尝试确定客户是否有活动订阅。为此，我使用以下代码：

const stripe = require('stripe')('some-api-key');
export default function Example(){
// the user will automatically be considered non-subbed by default
const [isSubscriber, setIsSubscriber] = useState(false)

// grab the customer id from stripe
async function get_customer_id() {
const customers = await stripe.customers.search({
query: `metadata['some-meta-data-key']:'some-meta-data-value'`
});
return customers.data[0]['id']
}

// grab the list of active subscriptions from stripe
async function customer_is_subscriber(){
const subs = await stripe.subscriptions.list({
status: 'active',
});
return subs
}

// determine if the customer id is in the list of active subscriptions. 
// return true if so, false otherwise
async function test_equality(){
const customer_id = await get_customer_id();
const subbed = await customer_is_subscriber();
const answer = subbed.find(sub => sub.customer === customer_id)
return !!answer;

}

useEffect( () => {
async function load_result() {
const promise_function_return = await test_equality()
setIsSubscriber(promise_function_return)
}
load_result();
}, [isSubscriber]);

return (
// some react code
)
}

我已经能够成功地获得我的所有其他功能，在这些功能中，我正在对用户是否是订阅者进行比较，但在我遇到问题的地方，我正在更新状态值(例如，如果它们被替换为true，则为false(。

我发现了一些关于这个特定主题的好问题，例如：这里的useState集合方法没有立即反映的变化

此处：React 中Promise内部的setState

和这里：setState在一个有钩子的useEffect中的Promise函数中？

但我就是没能让它正常工作。这是我目前最接近解决这个问题的一次。

Answer 1

当前您的代码说，当isSubscriber更改时，它应该检查用户是否是订阅者，并更新isSubscriber状态。。。所以这是一个鸡和蛋的问题。在设置isSubscriber之前，它不会设置isSubscriber。

我认为您希望将}, [isSubscriber]);更改为}, []);，以便在组件首次加载时(而不是isSubscriber更改时(执行该代码。

Answer 2

useEffect钩子将始终在装载时运行，而不管的依赖数组中是否有任何内容。这意味着您的useEffect将按原样工作，并将在Mount上运行，以及当isSubscriber更改时：

useEffect( () => {
async function load_result() {
const promise_function_return = await test_equality()
setIsSubscriber(promise_function_return)
}
load_result();
}, [isSubscriber]);

要验证这一点，您可以查看这个代码沙箱示例。useEffect看起来和您的一样，您会注意到isSubscriber最初设置为false，但在3秒钟后更新为true。

即使该部分看起来工作正常，您仍可能需要进行调整。在依赖数组中有isSubscriber的情况下，每当isSubscriber发生变化时，就会调用useEffect中的函数。这可能不是您想要的，因为这个函数实际上并不依赖于isSubscriber，而是实际设置isSubscriber。在这种情况下，这意味着test_equality()将在初始装载时运行，然后在设置isSubscriber后再运行一次，这是不必要的。

这篇博客文章很好地解释了useEffect依赖数组。

您可以通过从依赖数组中删除isSubscriber来修复此问题，如下所示：

useEffect(() => {
console.log("in useEffect");
async function load_result() {
const promise_function_return = await test_equality();
setIsSubscriber(promise_function_return);
}
load_result();
}, [isSubscriber]);

由于您提到状态值没有更新，因此get_customer_id()或customer_is_subscriber()中肯定存在另一个问题。最好仔细检查并确保stripeapi调用按预期工作。