我正在嘗試使用我的 API 呼叫（回應）的結果在 src 級別的 JSX 中顯示它。
但是由于范圍的原因，我無權訪問“回應”。在我的 useEffect 中分配它之前，我嘗試在全域范圍內將回應宣告為一個空變數，但它不起作用。
useEffect(() => {
const toFetchProfilPicture = async () => {
try {
const response = await axios.get(
`http://localhost:4200/api/user/image/${JSON.parse(localStorage.getItem("user")).user_id}`
);
} catch (err) {
throw err;
}
};
toFetchProfilPicture();
}, []);
return (
<div className="modal">
<form className="modal__infos" onSubmit={saveChange}>
<div className="modal__photo">
<img src={response.data[0]} alt="profile_picture" />
</div>
</form>
</div>
);
};
我無法使用函式在全域范圍內具有“回應”，但我想這樣做。
如何在 JSX 中使用“回應”？
uj5u.com熱心網友回復：
您應該使用包含字串（影像 URL）的狀態變數：
const [imgSrc, setImgSrc] = useState('');
useEffect(() => {
const toFetchProfilPicture = async () => {
try {
const { data } = await axios.get(
`http://localhost:4200/api/user/image/${JSON.parse(localStorage.getItem("user")).user_id}`
);
setImgSrc(data[0])
} catch (err) {
throw err;
}
};
toFetchProfilPicture();
}, []);
return (
<div className="modal">
<form className="modal__infos" onSubmit={saveChange}>
<div className="modal__photo">
<img src={imgSrc} alt="profile_picture" />
</div>
</form>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/352873.html
下一篇：ReactAPI單個產品未呈現