Javascript 反应：在useEffect钩子中的网络请求之后更新并访问状态。国家仍然陈旧

我正在尝试更新并引用组件初始化函数中的

hasrerror

state字段，以控制初始化成功后是否发生重定向或是否显示错误

以下是本期的简明版本：

const [hasError, setHasError] = useState(false);

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

async function initialize(){
  try {
    await networkRequest();
  } catch (err) {
    setHasError(true);
  }
  console.log(hasError);  // <- is still false
  if(!hasError){
    redirect()  // <- causes redirect even with error
  }
}

function networkRequest() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject();
    }, 1000);
  });
}

const[hasError，setHasError]=useState（false）；
useffect（（）=>{
初始化（）；
}, []);
异步函数初始化（）{
试一试{
等待networkRequest（）；
}捕捉（错误）{
setHasError（真）；
}
console.log（hasrerror）；//{
拒绝（）；
}, 1000);
});
}

初始化函数应该只在组件装载时调用一次，这就是我将

[]

传递给

useffect

的原因。将

[hasError]

传递到

useffect

也没有意义，因为我不希望每次

hasError

更新时都运行初始化

我已经看到有人建议使用

useReducer

，但这似乎有点不妥，因为我已经在这个组件上使用了Redux，然后我需要使用两个不同的

dispatch

实例

---

像这样的用例通常是如何处理的？

您必须创建另一个

useffect

钩子来“侦听”对

hasError

的更改

setHasError

在这种情况下是异步的，因此新值不会立即提供给您

我不知道您的组件的其余部分是什么样子的，但听起来您应该具有某种

isLoading

状态，该状态将用于显示

loading

消息，然后一旦您的请求完成且失败，您将呈现所需内容，或者如果成功，您将

重定向

下面是一个例子：

函数应用程序（）{
const[isLoading，setIsLoading]=useState（true）；
常量[hasError，setHasError]=useState（false）；
useffect（（）=>{
（异步（）=>{
试一试{
等待networkRequest（）；
孤岛加载（假）；
}捕获（错误）{
setHasError（错误）；
孤岛加载（假）；
}
})()
}, [])
useffect（（）=>{
如果（！isLoading&&！hasError）{
重定向（）；
}
}，[isLoading，hasError]）；
如果（isLoading）{返回“Loading”；}
//否则，在这里你需要做什么就做什么
}

我是否误解了这一点？如果您想在成功的

网络请求后进行重定向，那么为什么不在
try
中进行重定向呢？您会在日志中看到
false
，因为请求是异步的，即使它抛出错误，您也无法捕获它。另外，如果你想记录一个状态，你可以在函数体中记录。第二个useffect就是关键！非常感谢！