所以我一直在嘗試解決這個問題，我真的希望有人能夠提供幫助
我正在創建一個陣列并像這樣在其中存盤一個物件串列。
const heroPost = postList.filter(post => post.hero);
當我控制臺記錄heroPost時，我得到以下結果。
我正在嘗試訪問此物件中的 url 屬性，如下所示。
console.log(heroPost[0].url);
但我不斷收到這個未定義的錯誤。
我不太確定這里出了什么問題。我正在使用異步函式從資料庫中獲取資料，我猜這可能是一個問題，但我正在從 jsx 中的“postList”輸出資料，我用它來將資料檢索到“heroPost”中，所以我我不確定這怎么可能是問題。任何幫助或想法將不勝感激。
謝謝！
編輯：這是使用“postList”呈現資料的組件部分。哪個作業正常。
<div className="posts-container">
{postList.map((post) => (
<div key={post.id} className="post">
<h3 className="post-title">{post.title}</h3>
<div className="post-info">
<p className="author">{post.author}</p>
<p className="timestamp">{post.author}</p>
</div>
<p className="content">{post.body}</p>
<img src={post.url} alt="" />
</div>
))}
</div>
我現在要做的是使用 heroPost 將資料呈現到頁面的英雄部分，如下所示，但它仍然拋出未定義的錯誤。
<div className="hero">
<img src={heroPost[0].url} alt="" />
</div>
感謝您的所有評論和回答，我現在明白了這個問題。仍然不明白為什么它在“postList”實體中有效，而不是在這里。有沒有一種方法可以做到這一點，而無需直接嘗試轉到我檢索資料的檔案并將其添加到該函式中？
uj5u.com熱心網友回復：
由于您使用異步函式來獲取資料，因此當包含此代碼的組件第一次呈現時，它將沒有呈現組件所需的資料。
因此“未定義”
您可以通過有條件地渲染組件來解決此問題。也就是說，只有在資料可用后才渲染組件。
由于您尚未共享組件代碼，因此您可以參考此反應檔案來幫助解決問題：
對于您分享的第二個片段：
<div className="hero">
{(heroPost && heroPost[0])?<img src={heroPost[0].url} alt="" />:'No data'}
</div>uj5u.com熱心網友回復：
簡單的答案：你得到這些錯誤是因為它是未定義的
如果您看一下，您console.log會在第一行看到一個空陣列
那是因為當你第一次渲染你的組件postList是一個空陣列。
只有在您獲取資料并填充陣列后，您才能訪問它
你可以嘗試這樣做
useEffect(() => {
setHeroPost(postList.find(p => p.hero))
}, [postList])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469080.html
標籤：javascript 反应 异步