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)

不断以“Undfeined”的形式返回，换句话说，我似乎无法将我的响应值保存到其中。知道为什么或如何解决它吗？

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，请将其添加为 prop 是一个好习惯。

反应 useEffect 和 useRef

2 个答案: