如果一个函数更新状态，而另一个函数随后立即访问该状态，是否会导致争用条件

Question

我有两个组件，一个是上传文件，另一个是可以提交的表单。上传者在上传完成时有一个回调，表单在提交表单时有一个回调。我的目标是在上传者完成上传并提交表单时向后端发出请求，而不关心哪个先发生。

我目前的解决方案是这样的：

const [isFileUploaded, setFileUploaded] = useState(false);
const [isFormSubmitted, setFormSubmitted] = useState(false);
const handleUploadFinish = ( {signedBlobId} ) => {
    // update params to be sent to the backend with the signedBlobId
    setFileUploaded(true)
    if (isFormSubmitted) {
        // make the backend call
    }
}
const handleFormSubmitted = (values) => {
    // update params to be sent to the backend with the values
    setFormSubmitted(true)
    if (setFileUploaded) {
        // make the backend call
    }
}

但是，我在 React 文档中读到有关状态的设置状态是一个异步操作。这让我担心，如果两个回调碰巧几乎完全相同地被调用，那么在检查isFileUploaded和isFormSubmitted时，它们可能仍然会被false，从而阻止后端调用发生。

这是一个合理的担忧吗？如果是这样，有什么更好的方法来解决这个问题？

Answer 1

是的，按照你构建逻辑的方式，可能会出现竞争条件。您应该希望代码具有更同步的模式。幸运的是，有一种方法可以通过集成useEffect()钩来解决此问题。从本质上讲，只要您订阅的值发生变化，它就会被触发。

在这种情况下，我们要验证isFileUploaded和isFormSubmitted是否为真，只有这样我们才会进行最终的后端 API 调用。

考虑这样一个例子：

import React, { useState, useEffect } from "react"
const myComponent = () => {
    const [isFileUploaded, setFileUploaded] = useState(false);
    const [isFormSubmitted, setFormSubmitted] = useState(false);
    const [params, setParams] = useState({})
    const handleUploadFinish = ( {signedBlobId} ) => {
        // update params to be sent to the backend with the signedBlobId
        setFileUploaded(true)
    }
    const handleFormSubmitted = (values) => {
        // update params to be sent to the backend with the values
        setFormSubmitted(true)
    }
    useEffect(() => {
        if(isFormSubmitted && isFileUploded){
           ...make backend call with updated params
        }
    }, [isFormSubmitted, isFileUploaded])
   return(
      ....
   )
}