我需要映射用戶保存的一系列小說，以便在每部小說上呈現資訊卡。每次我嘗試時，頁面都無法加載，并且我得到“TypeError：無法讀取 null 的屬性（正在讀取'名稱'）--嘗試讀取小說的名稱等。查詢在后端完美運行，我能夠控制臺記錄瀏覽器中的所有資料，所以我不確定為什么我會得到“未定義”。
我發現我能夠從用戶級別呈現資料，但不是“小說”子級別。所以我認為問題可能與映射有關？
這是查詢：
{
user {
_id
name
novels {
_id
name
author
rank
isComplete
}
}
}
以及組件中的相關代碼：
if (data) {
user = data.user
console.log(user.novels)
}
return (
<>
<div className="row">
{user ? (
<>
<h2>Your Novels:</h2>
{user.novels.map((novel) => (
<div
key={novel._id}
className="col-sm-12 col-md-2 col-lg-2 card">
<p> {novel.name}
< br />
<span className="card-subheader" >by</span> {novel.author}
< br />
<span className="card-subheader">Rank:</span> {novel.rank}
< br />
<span key={novel.isComplete}>{novel.isComplete}</span>
</p>
</div>
))}
) : null}
</div>
</>
);
}
所以基本上，它可以渲染user.name例如，但不能user.novel.name
任何幫助將不勝感激！（這是我的第一篇文章，如果我遺漏了什么，請提前道歉）
uj5u.com熱心網友回復：
看來這不是前端代碼的錯。您應該檢查user在console。它可能user.novels包含一個空物件導致讀取錯誤novel.name，如下所示：
{
user: {
_id: ...
name: ...
novels: [
null or {}, // novel is null so reading novel.name cause the error.
{
_id: ...
name: ...
author: ...
rank: ...
isComplete: ...
}
],
...
}
}
但是，您可以在前端檢查這一點，但從技術上講，這些空物件不應該出現在后端的回應中，應該修復它們。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406703.html
標籤：