我尝试使用我的allData变量,这样我就可以使用它内部的数据,并在返回中显示它。有人能帮助我如何在它外部的fetchapi函数内部使用该变量吗?
那个url(random-data-API)有一个地址,我需要解析它,然后在返回的文件中单独打印出来,我尝试使用allData.address
,也使用了fetchapi.allData.address
,我是新手,我一直在研究如何使用它,但我还没有找到有用的东西
const fetchapi = async () => {
try {
setLoading(true); // Antes del fecth
await axios
.get("https://random-data-api.com/api/v2/addresses")
.then((response) => {
setLoading(false); // loading false luego de mostrar la data
const allData: Response = response.data;
console.log(allData);
});
} catch (error) {
setLoading(false); // loading false si sale un error
console.log(error);
}
return allData;
};
return (
<Fragment>
<div>
<button onClick={fetchapi}>Fetch Location</button>
{address ? null : (
<div
style={{
backgroundColor: "#c7c7c7",
display: "flex",
flexDirection: "column",
padding: 16,
margin: 5,
borderRadius: 20
}}
>
<p>
<strong>Address: {Adress here from the allData var}</strong>
</p>
<p>
<strong>City:{city here from the allData var}</strong>
</p>
<p>
<strong>Street Name:{...}</strong>
</p>
<p>
<strong>Zipcode:{...}</strong>
</p>
</div>
)}
</div>
</Fragment>
);
1条答案
按热度按时间ozxc1zmp1#
您应该声明一个存储allData的状态,类似于setLoading。
然后可以将响应存储到状态setAllData(response.data)中
并在地址字段中使用它,如allData.address