我将数据加载到状态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调用中使用的变量中使用它，而不是从状态变量本身使用它。顺便说一句：请确保在发出获取请求时处理潜在的错误，这样您的应用就不会因网络或服务器问题而意外中断或挂起。