Reactjs api调用前对useState钩子更新作出反应

我有一个函数，它运行验证并根据检查结果设置状态变量。我需要通过API调用传递要上传的变量

我的问题是，当我需要在api调用中传递更新的

serviceSelected

变量时，状态变量没有更新，而是以初始状态（null）传递

我该如何着手解决这个问题

当前代码

const [serviceSelected, setServiceSelected] = useState(null)

function checkServicesSelected () {

       if (photography === true && video === false && drone === false){
            setServiceSelected(PhotographyService);
        } else if(photography === true && video === true && drone === false){
            setServiceSelected(PhotographyVideoService);
        } else if (photography === true && video === true && drone === true){
            setServiceSelected(allThreeServices);
        } else if (photography === false && video === true && drone === false){
            setServiceSelected(VideoService);
        } else if (photography === false && video === true && drone === true){
            setServiceSelected(VideoDroneService);
        } else if (photography === true && video === false && drone === true){
            setServiceSelected(PhotographyDroneService);
        } else if (photography === false && video === false && drone === true){
            setServiceSelected(DroneService);
        }
    }


/// first runs the check, then makes an api call. 

 async function completeApplication() {

    setShowSubmitForm(true);        

    try {
        /// run check
        await checkServicesSelected()

        /// pass info to uploadInfo Function 
        const UploadProspectInfo = await UploadInfo({service: serviceSelected})

     } catch (e) {
       alert(e.message);

          }

       setShowThankYou(true); 
   }

更新后的代码正在运行

 useEffect(() => {
    if(serviceSelected){
        UploadInfo({service: serviceSelected})
        .catch(function (e) {
            alert(e.message);
        });
        setShowThankYou(true)
    }
}, [serviceSelected]);


function completeApplication() {
        setShowSubmitForm(true);
        checkServicesSelected();  
    }

您可以使用钩子来实现它

...
...
React.useEffect(() => {
(async function() {
  try {
         /// pass info to uploadInfo Function 
         const UploadProspectInfo = serviceSelected && await UploadInfo({service: serviceSelected})
         //serviceSelected && setShowThankYou(true); // you need it here?

    }catch (e) {
       alert(e.message);
     }
})();

  }, [serviceSelected]);


/// first runs the check, then makes an api call. 

function completeApplication() {

        setShowSubmitForm(true);        

        /// run check
        checkServicesSelected()

        //setShowThankYou(true); // maybe you don't need it here?
   }

旁注：

01)

---

02）

SetServicesSelected重新呈现组件，因此此行将显示旧的serviceSelected值：

const UploadProspectInfo = await UploadInfo({service: serviceSelected})

因此，如果要在状态中存储serviceSelected值（用于api调用以外的其他目的），您有两个选项，必须像这样使用useEffect：

 useEffect(() => {
    if(serviceSelected){
        UploadInfo({ service: serviceSelected })
        .catch(function (e) {
            alert(e.message);
        });
    }
}, [serviceSelected]);


/// first runs the check, then makes an api call. 

function completeApplication() {
    setShowSubmitForm(true);
    checkServicesSelected();
    setShowThankYou(true);
}

但是，如果不希望以状态存储，则可以使checkServicesSelected函数为纯函数，并返回所选服务，而不是以状态存储