React:在useEffect钩子中收到网络请求后，更新并访问状态.国家仍然陈旧

Question

我正在尝试更新和引用组件初始化函数内部的hasError状态字段，以控制初始化成功后是否发生重定向或是否显示错误。

以下是问题的浓缩版本：

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

初始化函数应该只在组件装载时调用一次，这就是我将[]传递给useEffect的原因。将[hasError]传递给useEffect也没有意义，因为我不希望每次hasError更新时都运行初始化。

我看到有人建议使用useReducer，但这似乎很糟糕，因为我已经在这个组件上使用了Redux，然后我需要使用两个不同的dispatch实例。

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

Answer 1

您将不得不创建另一个useEffect挂钩；倾听"；以便更改为CCD_ 10。在这种情况下，setHasError是异步的，因此新值不会立即提供给您。

我不知道组件的其余部分是什么样子的，但听起来你应该有某种isLoading状态，用于显示loading消息，然后一旦你的请求完成并失败，你就可以呈现你需要的东西，或者如果成功，你就是redirect。

这里有一个例子：

function App() {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
useEffect(() => {
(async () => {
try {
await networkRequest();
isLoading(false);
} catch (error) {
setHasError(error);
isLoading(false);
}
})()
}, [])
useEffect(() => {
if (!isLoading && !hasError) {
redirect();
}
}, [isLoading, hasError]);
if (isLoading) { return "Loading"; }

// else, do whatever you need to do here
}