反应 useEffect 和 useRef

Posted 2023-03-17

【中文标题】反应 useEffect 和 useRef

【英文标题】：React useEffect and useRef

【发布时间】：2021-08-28 12:50:11

【问题描述】：

所以我得到了这个 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”的形式返回，换句话说，我似乎无法将我的响应值保存到其中。知道为什么或如何解决它吗？

【问题讨论】：

它不会出现，因为 .then 在你的 console.log 运行之后运行，因为它是一个承诺。为什么不将其存储在状态中？

我敢肯定，如果您查看您的 log 订单，您的第三个日志会在第一个之前打印。

【参考方案1】：

您的问题陈述似乎不在您的 .then() 块中，这意味着您无法确定 .then() 块到那时是否已经运行。网络调用是异步的，因此 javascript 会提前执行而不是等待。如果您想在调用返回之后查看该值是什么，您应该将您的console.log(initialResponse.current) 语句放在.then() 块中。

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

【参考方案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 是一个不错的做法。

【讨论】：

这并没有解决问题。

initialResponse.current 在第一次渲染时如何实现？如果这正是用户想要实现的变量？此外，将 refs 放在 dep 数组中是行不通的，它不应该那样做。

请在您的代码中添加一个 codepen（或类似的），我可以为您提供更多帮助。 @戈默先生