“无法读取未定义的属性”，即使存在数据（React/JSX）

Question

我需要映射用户保存的一系列小说，以便在每部小说上呈现信息卡。每次我尝试时，页面都无法加载，并且我得到“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

任何帮助将不胜感激！ （这是我的第一篇文章，如果我遗漏了什么，请提前道歉）

Answer 1

看来这不是前端代码的错。您应该在console 中检查user。可能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: ...
      }
    ],
    ...
  }
}

但是，您可以在前端进行检查，但从技术上讲，这些空对象不应该出现在后端的响应中，应该修复它们。