Question

我的文件中有这种格式的useEffect

    useEffect(() => {
     async function func1(){
                    //fetching data from database storing it in variable
        const options = {
                  headers: {
                    Accept: "application/json",
                    "Content-type": "application/json",
                  },
                };
        
                fetch(process.env.REACT_APP_DB_URI + "/icty/" + setzip, options)
                  .then((res) => res.json())
                  .then(
                    (result) => {
        ..... setAddressCurrent(result)
        
                }
              
                async function func2 (){
                     if (user.address) {
                  const data = user.address;
                  let zip;
                  var bar = new Promise((resolve, reject) => {
                    Object.keys(data).forEach(function (key, index, array) {
                      if (data[key].types) {
                        data[key].types.forEach((x) => {
                          if (x === "route") {
                            Cookies.set("street", data[key]["long_name"]);              
                          }
                          if (x === "street_number") {
                            Cookies.set("street_number", data[key]["long_name"]);
                          }
                          
                        });
                      }
                    });
                  }); 
               if(addressCurrent === user.address) return 1;
                  return bar.then(() => {
                    return zip;
                  });
                }
                }
        
               
                func1()
                func2() //------> how to call this one after func1 is finished doing all job
            }, []);

由于问题func2在func1完成之前被调用，所以我有未定义的变量。有人知道如何在React Hooks中轻松解决此问题吗？修改后的代码

Answer 1

我认为问题在于您希望func2在相同的钩子执行中与组件状态一起执行，并且您不确定在调用func2之前状态是否已更新。

您的逻辑表示为：

func1() ==> sets state
<you expect the state to be updated for func2>
func2() ==> uses state

相反，您应按以下方式介绍逻辑。

useEffect(() => {
 async function func1() { /* function body that changes stateUpdatedByFunc1 */ }

 func1()
}, []) // only executes on component mounting phase

useEffect(() => { 
 async function func2()  { /* function body that depends on stateUpdatedByFunc1 */ }

 if (stateUpdatedByFunc1) {
  func2() // only call func2 if the state is not undefined or null
 }
},[stateUpdatedByFunc1]) // this gets executed after updating the state

此外，请记住将await放在您希望花费时间的任何地方。例如，您没有使用await fetch(...)，这肯定会使func1早于期望的返回。

Answer 2

您不能在react挂钩中运行异步代码，您需要将功能外包到效果之外，并在其中使用异步

async function runFunction() {
    function func1 (){
        //do something here
    }

    function func2(){
        //do some stuff here
    }

    await func1()
    await func2() //------> how to call this one after func1 is finished doing all job
}
 

useEffect(() => {
   runFunction()
}, []);

仅在上一个操作完成后才调用useEffect中的函数

2 个答案: