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

Question

我有一个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内部声明的变量吗?下面是我的导航栏渲染代码片段:

return (
...
<DropdownToggle
caret
color="default"
nav
onClick={(e) => e.preventDefault()}
>
<div className="photo">
<img
alt="..."
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>
)

Answer 1

你不能在渲染中使用use effect内部的变量。如果你想使用useEffect内的东西，你有两个选择:

1. 为数据创建状态，即useState，但这会触发重新渲染，如果这是你想要的。
2. 使用ref .useRef()，这可以用来有一个变量，在整个渲染过程中持续存在。但是，对ref的更改不会触发重新渲染，参见:https://reactjs.org/docs/hooks-reference.html#useref

如果你在src中使用数据，你将不得不使用状态来允许更改数据以重新呈现组件。