React useEffect and useRef

Question

所以我得到了这个useEffect函数：

useEffect(
() => {
getDoH().then((response) => {
initialResponse.current = response.data;
console.log(response.data)
}, (error) => {
console.log(error);
}); 
console.log(initialResponse.current)
}, []);

getDoH是axios.get函数，initialResponse是：

const initialResponse = useRef();

我用它来避免一些问题。重点是页面在第一次渲染时从我的后端获取一组值，并将其保存在"；initialResponse"；这样我以后可以在其他函数中使用它。

但是我的

console.log(initialResponse.current)

一直以"；Undefined"；，换句话说，我似乎无法将我的响应值保存到其中。知道为什么或如何修复它吗？

Answer 1

您的问题语句似乎不在.then()块内，这意味着您不能确定此时.then()块是否已运行。网络调用是异步的，因此Javascript提前执行而不是等待。如果您想在调用返回后查看该值，则应该将console.log(initialResponse.current)语句放入.then()块中。

请记住，这意味着在第一次渲染时不一定有数据。您应该编写代码以适应这种可能性。

Answer 2

您应该在之前对initialResponse进行验证

useEffect(
() => {
if(initialResponse && initialResponse.current){
getDoH().then((response) => {
initialResponse.current = response.data;
console.log(response.data)
}, (error) => {
console.log(error);
}); 
console.log(initialResponse.current)
}
}, [initialResponse, getDoH]);

并添加initialResponse作为useEffect钩子的道具。

如果您不能在useEffect中声明getDoH，那么将其添加为道具是一种很好的做法。