我将数据加载到状态initialPetData中,如下所示:
useEffect(() => {
setShowButton(true);
fetch("http://localhost:8080/upload/recieve", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((data) => {
console.log(data);
setInitialPetData(data);
console.log("Initial Pet Data: ", initialPetData);
setEncodedImageData(data.imageSrc);
});
}, []);
但是在控制台日志行上它显示为空,因此数据不能被呈现,但是如果我进行更改并保存。它将重新加载宠物数据将显示为填充这里是一个图片:
之前:before
保存后:after
1条答案
按热度按时间8yoxcaq71#
你所经历的行为是由于React状态更新的工作方式。React的
setState
(以及来自useState
钩子的set...
函数)是异步的。当您调用它时,它会安排更新,但不会立即改变状态变量。这意味着当您尝试在设置状态后立即记录状态时,它尚未更新。下面是发生的事情的顺序:
1.你叫
setInitialPetData(data);
。1.紧接着,您调用
console.log("Initial Pet Data: ", initialPetData);
。目前,initialPetData
尚未更新。initialPetData
将反映新数据。要查看更新后的状态,可以使用
useEffect
钩子来观察更改:这个
useEffect
将在每次initialPetData
更改时运行,因此您将能够看到它的更新值。记住:始终将React状态视为异步状态。如果需要使用刚刚设置的值,请从
setState
调用中使用的变量中使用它,而不是从状态变量本身使用它。顺便说一句:请确保在发出获取请求时处理潜在的错误,这样您的应用就不会因网络或服务器问题而意外中断或挂起。