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

Posted 2023-02-22

【中文标题】从存储在 React 状态中的对象数组访问属性

【英文标题】：Accessing a property from an array of objects stored in state in React

【发布时间】：2019-03-20 22:30:57

【问题描述】：

我在一个项目中使用 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 来确定对象是否在我需要它们的时候被检索到。看来他们是。我根本无法从状态访问它们的属性。

对此我有什么办法吗？还是我需要从数据库中一一检索？

【问题讨论】：

您可能在承诺解决之前就已经访问了数据，根据提供的当前代码很难说

【参考方案1】：

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

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

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

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

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

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

我希望这会有所帮助。

【讨论】：

在渲染函数中添加了这个console.log((this.state.tutors[0] ? this.state.tutors[0].email: null)) email 属性在控制台中显示得很好...但是当我尝试正常调用它时仍然找不到它

你能发布整个组件吗？

这里是完整的，我是这里的n00b，所以我想只是发布图片以便阅读i.imgur.com/GLfq7aO.pngi.imgur.com/Ek1DYh7.png

我认为这是正确的方向，但我仍然无法立即访问 TutorTable 中的属性。我可以在那里对他们做类似的事情吗？对于一些背景信息，它实际上是一个多页表，您可以通过按下按钮来翻阅，所以我一次只显示几个。这是组件：i.imgur.com/dfVJTYK.pngi.imgur.com/5NaSicr.pngi.imgur.com/jvpoX1y.png

【参考方案2】：

在我看来，您正在尝试获取数组的第一个元素 this.state.tutors[0].email 导师真的是一个数组吗，可以提供您控制台记录的数据格式，如您所说。这可能应该在评论部分，但我只有不到 50 个代表，所以我无法评论。

【参考方案3】：

你应该检查第一个导师。如果你要让家教一个数组，那么你可以访问它的第一个元素。

if(this.state.tutors[0]) 
   console.log("first element of tutors array", this.state.tutors[0].email)
   // anything you can acccess now of this element

并将第一任导师分配为 state 中的空数组。

state = 
    tutors: []

【参考方案4】：

在第一个生命周期中，您在 this.state.tutors[0] 中没有数据 出于这个原因，首先检查 this.state.tutors[0] 是否准备就绪

if(this.state.tutors[0])
 
   var data=this.state.tutors[0];
   data.push('your data');
   this.setState(tutors:data)