时间戳

首页 > 解决方案 > 从存储在 React 状态中的对象数组访问属性

arrays - 从存储在 React 状态中的对象数组访问属性

问题描述

我在一个项目上使用 ReactJS 并使用 KnexJS 访问数据库。我想以组件的状态存储和使用我检索到的 JSON 对象，如下所示。

this.setState({tutors: tutors}) //Retrieval from database after promise

然后像这样访问它们的属性

this.state.tutors[0].email this.state.tutors[0].firstname

但是，当我尝试这个时，我收到以下错误

TypeError: Cannot read property 'email' of undefined

我已经检查了 console.log 以及使用 JSON.stringify 来确定是否在我需要它们的时候检索到了这些对象。看来他们是。我根本无法从状态访问它们的属性。

对此我能做些什么吗？还是我需要从数据库中一一检索它们？

标签： arraysreactjsobjectpropertiesstate

解决方案

这可能会发生，因为在您的代码尝试从状态中检索数据的那一刻，数据还不存在——尽管它可能稍后会添加。根据我的经验，这是经常发生的事情。在尝试访问其上的属性之前，您可能应该检查一个对象是否存在——如果它不存在，则返回 null 或 undefined：

this.state.tutors[0] ? this.state.tutors[0].email : null

编辑（响应附加代码示例）：

  1. 假设您的 fetch 函数工作正常并将获取的数据添加到状态（我会使用 forEach 而不是 map 将元素推送到数组中，或者只是映射到获取的数组并将其直接添加到状态中，而无需中间数组/变量/push - 但我认为你的代码应该可以工作）......
  2. 问题与 render 方法有关，因为当组件最初呈现时，数据尚未处于状态，因此您将一个空数组传递给 TutorTable 组件，这可能反过来会产生您看到的错误。
  3. 数据稍后被添加到状态，但在这个阶段，初始渲染的错误已经发生。
  4. 您可以通过有条件地渲染 TutorTable 来解决这个问题，只有当数据被添加到状态时：

<div className="col-7">
  <h3> My Tutors </h3>
  {this.state.tutors.length > 0 && <TutorsTable tutors={this.state.tutors} />}
</div>

  1. 如果您在 render() 方法中 console.log out this.state.tutors，您应该会在控制台中看到初始渲染时返回的空数组 ([])，然后在组件重新渲染时填充数据的数组数据被添加到状态。

我希望这有帮助。

推荐阅读