仅在前一个完成后调用 useEffect 中的函数

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