當頁面使用 useEffect 加載時，我正在從 Firebase 獲取資料。我想在應用程式中使用 socialLinks 狀態，例如 socialLinks.instagram，但我收到此錯誤“無法讀取未定義的屬性（正在讀取 'instagram'）”。當我一一分配 socialLinks 并在 useEffect 中分配它們并在沒有給出錯誤的頁面。誰能解釋為什么我需要一一分配它們而不是從 socialLinks.instagram 中讀取。您還可以在下面找到我的 firebase 資料影像。
const [socialLinks, setSocialLinks] = useState();
const [instagram, setInstagram] = useState();
const [tiktok, setTiktok] = useState();
const [youtube, setYoutube] = useState();
useEffect(() => {
const getSocialLinks = async () => {
const docRef = doc(socialLinksCol, "24STOxvBEmCezY16LD");
const fireStoreData = await getDoc(docRef);
setSocialLinks(fireStoreData.data()); // I can't use this data in <a>
setYoutube(fireStoreData.data().youtube); // I can use this data in <a>
setInstagram(fireStoreData.data().instagram);
setTiktok(fireStoreData.data().tiktok);
};
getSocialLinks();
}, []);
console.log(socialLinks)
//output : {instagram: 'https://www.instagram.com/', youtube: 'https://www.youtube.com/', tiktok: 'https://www.tiktok.com/en/'}
//This is where I use the socialLinks in
<a href={socialLinks.instagram}>Instagram</a> // This give error
<a href={tiktok}>Tiktok</a> // This is fine
<a href={youtube}>Youtube</a>
uj5u.com熱心網友回復：
第一次渲染組件時，您設定了一些空狀態。
例如：
const [socialLinks, setSocialLinks] = useState();
導致一個名為socialLinks被宣告的變數。并且由于您沒有傳遞任何引數給useState,socialLinks將是undefined.
現在useEffect將運行。它將在后臺啟動異步操作（不阻止組件渲染）。
在獲取資料時，您的組件將嘗試第一次渲染。您參考socialLinks.instagram并且socialLinks未定義，因此您會收到錯誤訊息。
在加載資料之前，您可能不希望渲染任何內容。
有多種方法可以做到這一點。如果您希望代碼與您現在擁有的 html 一起使用，只需將社交鏈接的初始狀態宣告為空，如下所示：
const [socialLinks, setSocialLinks] = useState({
instagram: '', tiktok: '', youtube: ''
});
如果您只想檢查資料是否存在，則可以將狀態保留為未定義，然后在渲染時檢查其是否可用：
if (socialLinks && socialLinks.instagram) {
return <a href={socialLinks.instagram}>Instagram</a>;
} else {
return null;
}
請記住，呼叫setSocialLinks會導致狀態更新，因此當資料存在時它將重新渲染組件！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510125.html
標籤：Google Cloud Collective 反应火力基地谷歌云火库反应钩子
上一篇：如何釋放函式內的指標記憶體？