我可以在 reactstrap 的渲染中使用 useEffect 中声明的变量吗？

Posted 2023-03-23

【中文标题】我可以在 reactstrap 的渲染中使用 useEffect 中声明的变量吗？

【英文标题】：Can I use the variables declared in useEffect inside of my render in reactstrap?

【发布时间】：2021-10-28 20:24:42

【问题描述】：

我的导航栏中有一个 useEffect 挂钩：

  const spoon = localStorage.getItem("true");

  useEffect(() => 
    console.log(spoon")
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open('GET', `https://server.com/$spoon`, false);
    xmlHttp.setRequestHeader('AO', `Password $PASS`)
    xmlHttp.send()
    console.log(xmlHttp.response)
    var data = JSON.parse(xmlHttp.response);
    console.log(data["user"]["avatar"]) 
    , []);

现在，当用户登录时，我在导航栏中触发了一个请求以检索用户头像，但是，我只想这样做一次，所以我使用 useEffect 就好像我没有那样，在页面之间导航变得很慢每次单击以将用户带到新页面都会在导航栏中触发另一个 http get 请求。

现在 useEffect 确实有效，但现在我认为无法在范围之外使用 data 变量（？），这意味着在导航栏渲染中我无法渲染用户头像。有没有解决的办法？或者我可以在渲染中使用 useEffects 中声明的变量吗？这是我的导航栏渲染代码的 sn-p：

return (
   ...
   <DropdownToggle
        caret
        color="default"
        nav
        onClick=(e) => e.preventDefault()
        >
        <div className="photo">
        <img
         
         src='data["user"]["avatar"]'  /*<-I need the data variable here so I can get the users avatar 
                                         from request*/
         />
         </div>
         <b className="caret d-none d-lg-block d-xl-block" />
         <p className="d-lg-none">Log out</p>
   </DropdownToggle>
)

【参考方案1】：

您不能在渲染中使用 useEffect 内部的变量。如果您想使用 useEffect 中的内容，您有两种选择：

为数据创建状态，即useState，但是如果你想要的话，这将触发重新渲染。 使用引用，即useRef()，这可用于在整个渲染过程中保留一个变量。但是，对 ref 的更改不会触发重新渲染，请参阅：https://reactjs.org/docs/hooks-reference.html#useref

鉴于您正在使用 src 中的数据，您将不得不使用状态来允许对数据的更改以重新呈现组件。

【讨论】：

完美，useState 解决方案有效，谢谢