如何从承诺中更新状态变量？

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

)

}

我已经能够成功地获得所有其他功能，我正在比较用户是否是订阅者，但我遇到的问题是更新状态值（例如，如果他们被替代，则为真，否则为假）。

我发现了一些关于这个特定主题的过去的好问题，例如：这里

此处：

这里：

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

Answer 1

目前您的代码说，当 isSubscriber 发生变化时，它应该检查用户是否是订阅者并更新 isSubscriber 状态...所以这是先有鸡还是先有蛋的问题。在设置 isSubscriber 之前，它不会设置 isSubscriber。

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

Answer 2

useEffect 挂钩 将始终运行挂载 不管其依赖项数组中是否有任何内容。这意味着您的 useEffect 将按原样工作，并将运行 onMount 以及 isSubscriber 更改时：

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

要验证这一点，您可以查看 this codesandbox example。 useEffect 看起来和你的一样，你会注意到 isSubscriber 最初设置为 false，但在 3 秒后更新为 true。

即使该部分看起来工作正常，您可能仍需要进行调整。在依赖项数组中使用 isSubscriber， useEffect 中的函数将在任何时候 isSubscriber 更改 时被调用。这可能不是您想要的，因为此函数实际上并不依赖于 isSubscriber，而是实际上设置了 isSubscriber。在这种情况下，这意味着 test_equality() 将在初始装载时变为运行，然后在设置 isSubscriber 后再次变为

，这是不必要的。

This blog post 很好地解释了 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() 中肯定存在另一个问题。最好仔细检查并确保条带 api 调用按预期工作。

如何从承诺中更新状态变量？

How can I update a state variable from a promise?

javascript

promise

stripe-payments

use-state