Question

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

有什么我可以做的吗？还是我需要一个一个地从数据库中检索它们？

Answer 1

可能会发生这种情况，因为在您的代码尝试从状态中检索数据时，数据尚不存在-尽管以后可能会添加。根据我的经验，这种情况经常发生。您可能应该先尝试检查对象是否存在，然后再尝试访问该对象上的属性，并在对象不存在的情况下返回null或未定义：

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

编辑（以响应其他代码示例）：

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

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

如果在render（）方法中console.logout this.state.tutors，您应该在控制台中看到在初始渲染时返回的空数组（[]），然后在组件重新加载时填充了数据的数组-在将数据添加到状态时进行渲染。

我希望这会有所帮助。

Answer 2

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

Answer 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 = {
    tutors: []
}

Answer 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})
 }

从以状态存储在React

4 个答案: