Реагировать на обновление состояния use hook до вызова API

Question

У меня есть функция, которая запускает проверку и устанавливает переменную состояния на основе результатов проверки. Мне нужно передать переменную для загрузки через вызов API.

Моя проблема в том, что переменная состояния не обновляется и переходит в исходное состояние (ноль), когда мне нужно передать обновленную переменную serviceSelected в вызове API.

Как бы я go решил это?

текущий код

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();  
    }

Answer 1

setServiceSelected повторно отображает компонент, поэтому в этой строке будет старое значение 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 чистой и вернуть выбранную службу вместо сохранения в состоянии.

Answer 2

Вы можете использовать useEffect крюк, чтобы достигнуть этого

...
...
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) asyn c в использованииЭффект