Question

我有一个可以很好触发的 useEffect。当它触发时，我想对 API (async function deleteFile(filename) { console.log(filename); // correct file name as exists in bucket try { await storage .bucket(bucketName) // correct bucket name and subfolder 'my-image-bucket/posts' .file(filename) .delete(); } catch (e) { console.log('Error message = ', e.message); // Not Found } }) 进行 X 次调用，并在它们解析时基本上“填充”getQueueMetrics 状态值。

queueMetrics

所有 setQueueMetrics 都正确触发……但是，当它们触发时，它会覆盖 queueMetrics 的值而不是我想要的值——所以总而言之，最后一个 API 调用是 {{ 1}}。

经过一番查找，我将 setQueueMetrics 调用更改为：

const [queueMetrics, setQueueMetrics] = useState()

useEffect(() => { 
    QUEUE_NAMES_ARR.forEach(qName => {
        getQueueMetrics(qName)
            .then((qMetric) => {
                setQueueMetrics({...queueMetrics, [qName]:queueMetric})) 
            })
            .catch((err) => console.error("ERR: unable to load queue ("+qName+") metrics: " + err))
        })
    }, [setQueueMetrics])

这适用于组件的初始负载。但是...在辅助负载上，它不起作用。 useEffect 按预期触发，API 调用按预期结束，setQueueMetrics 被调用……但没有任何更新。

这两种方法都感觉是错误的。我相信第二个是通过引用工作的，因此解决了上下文问题，但我不确定为什么它不适用于组件的后续加载。它也感觉不太好。所以我想知道从 useEfect 函数对同一状态对象进行多次异步状态更新的最佳实践方法。

useEffect 中的异步 useState 覆盖状态值

0 个答案: