在useEffect中创建一个异步函数，并在函数的while循环中使用await，似乎不起作用

Posted 2023-02-18

【中文标题】在useEffect中创建一个异步函数，并在函数的while循环中使用await，似乎不起作用

【英文标题】：Making a async function inside useEffect, and use await inside the while loop in the function, seems doesn't work

【发布时间】：2021-11-07 09:29:17

【问题描述】：

有人遇到过像我这样的问题吗？我在 useEffect 中创建了一个异步函数，然后调用它。在异步函数中，我有一个while循环，并在while循环中使用await，但似乎不起作用，console.log（productsList.length）将打印0，当我尝试使用productsList.map返回一些组件，也不返回任何内容

useEffect(() => 
        async function callProduct()
            let a=5
            while (a>0) 
                const item = await contract.getProduct(a)
                await setProductsList([...productsList,item]])
               a--
            
        
        callProduct()
        console.log(productsList.length)
    ,[])

【参考方案1】：

因为新状态仅在组件重新渲染时更新，所以您应该将 console.log 放在 useEffect 中并检查依赖项。

useEffect(() => 
    async function callProduct() 
        let a = 5;
        const newProductList = [];
        while (a > 0) 
            const item = await contract.getProduct(a);
            newProductList.push(item);
            a--;
        

        setProductsList(newProductList);
    
    callProduct();
, []);

useEffect(() => 
    console.log(productsList.length)
, [productsList])

【参考方案2】：

所有 JS 中的函数在处理完每一步后都会立即返回，无论它们是否异步。 async 函数只是返回一个承诺，但它们仍然返回而不等待任何东西。因此，您的console.log 将立即执行，显示产品列表的长度。顺便说一句，即使 如果 setProductList 已执行，productList 状态变量仍将与以前相同，因为 useState 设置器不会立即应用。

只需将您的 console.log 放在您的 useEffect 之外。一旦getProduct 返回，它将设置变量并且您的组件将刷新，此时打印console.log。

【讨论】：

但是当我尝试使用 productsList.map 时，它也没有返回代码是 productsList.length && (productsList.map(item=>(........ )))

您是否在您的 getProduct 之后添加了一个 console.log 以查看它是否会返回一个项目？

我觉得我的参数有问题