"Cannot read properties of undefined," 即使数据存在 (React/JSX)

Question

我需要映射用户保存的一系列小说，以便在每本小说上呈现信息卡片。每次我尝试时，页面都无法加载并且我得到“TypeError：无法读取 null 的属性（读取 'name'）——试图读取小说的名称等。查询在后端完美运行，我我能够通过控制台记录浏览器中的所有数据，所以我不确定为什么会出现“未定义”。

我发现我可以呈现用户级别的数据，但不能呈现“小说”子级别的数据。所以我认为问题可能与映射有关？

这里是查询：

{
  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

如有任何帮助，我们将不胜感激！（这是我的第一个 post，如有遗漏请提前致歉）

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: ...
      }
    ],
    ...
  }
}

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

"Cannot read properties of undefined," 即使数据存在 (React/JSX)

"Cannot read properties of undefined," even though data is there (React/JSX)

javascript

jsx

mongodb

reactjs

graphql