Javascript 未捕获（承诺中）类型错误：无法读取属性'_id'；未定义的

我正在做一个项目。我正在使用数据库浏览器保存表单中的数据。现在我想检索表上的数据，但是

Uncaught (in promise) TypeError: Cannot read property '_id' of undefined

我正在使用以下文件：

form.js

'use strict'

import React from 'react'
import GradeInfo from 'GradeInfo'


export default class Form extends React.Component {
  constructor (props) {
    super(props)

    this.submitInfo = this.submitInfo.bind(this)
    this.schoolDb = this.props.schoolDb
  }

  submitInfo (event) {
    event.preventDefault()

    let gradeInfo = Object.assign({}, this.props.grade)

    if (!gradeInfo._id) {
      gradeInfo._id = gradeInfo.id
    }

    console.log('About to post to pouch...', gradeInfo._id)

    // Save to pouchdb
    this.schoolDb.put(gradeInfo, (err, result) => {
      if (!err) {
        console.log('Successfully posted to pouchdb!')
        this.props.clearCurrentGrade()
      } else {
        console.log('Error saving to pouch...')
        console.log(err)
      }
    })
  }



  render () {
    let {
      grade,
      edit,
      updateGrade,
      updateGradeState,
    } = this.props
    return (
      <div className='row'>
        <div className='columns large-centered large-12  medium-12'>
          <div className='form'>
            <div className='container'>
        <form action='' onSubmit={this.submitInfo}>
          <div className='student-form__container'>
          <GradeInfo edit={edit} handleChange={updateGrade('GradeInfo')} {...grade.GradeInfo} />
          <button className='button expanded' type='submit'>Save</button>
          </div>
        </form>
        </div>
        </div>
        </div>
      </div>
    )
  }
}

“严格使用”
从“React”导入React
从“GradeInfo”导入GradeInfo
导出默认类表单扩展React.Component{
建造师（道具）{
超级（道具）
this.submitInfo=this.submitInfo.bind（this）
this.schoolDb=this.props.schoolDb
}
次信息（事件）{
event.preventDefault（）
让gradeInfo=Object.assign（{}，this.props.grade）
如果（！gradeInfo.\u id）{
gradeInfo.\u id=gradeInfo.id
}
console.log（'即将发布到邮袋…'，gradeInfo.\u id）
//保存到数据库
this.schoolDb.put（gradeInfo，（err，result）=>{
如果（！err）{
console.log（'已成功发布到数据库！'）
this.props.clearCurrentGrade（）
}否则{
console.log（'保存到邮袋时出错…'）
console.log（错误）
}
})
}
渲染（）{
让{
等级
编辑
updateGrade，
updateGradeState，
}=这是道具
返回(
拯救
)
}
}

Data.js 这是我检索数据的地方：

import React from 'react'

export default class Data extends React.Component {

  constructor (props) {
    super(props)
    this.state = {grades: []}
    this.schoolDb = this.props.schoolDb
  }

  componentDidMount () {
    this.updateGrades()
    this.schoolDb.changes({
      since: 'now',
      live: true
    }).on('change', (change) => {
      this.updateGrades()
    }).on('error', (err) => {
      console.error(err)
    })
  }

  updateGrades () {
    this.schoolDb.allDocs({include_docs: true}).then((res) => {
      var grades = res.rows.map((row) => row.gradeInfo)
      this.setState({grades})
    })
  }

  render () {
    return (
      <div className='eidsr-data'>
        <div className='eidsr-data__header'>
          <h3 className='eidsr-data__title'>Grades Overview</h3>
        </div>
        <div className='table-list'>
          <table>
            <thead>
              <tr>
                <th>Student ID</th>
                <th>Semester</th>
                <th>Period</th>
              </tr>
            </thead>

            <tbody>
              {this.state.grades.map((gradeInfo) => <DataRow key={gradeInfo._id} gradeInfo={gradeInfo} {...this.props} />)}
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

class DataRow extends React.Component {
  render () {
    let {gradeInfo} = this.props

    return (
      <tr>
        <td>{gradeInfo.GradeInfo['studentID']}</td>
        <td>{gradeInfo.GradeInfo['semester']}</td>
        <td>{gradeInfo.GradeInfo['period']}</td>
      </tr>
    )
  }
}

从“React”导入React
导出默认类数据扩展React.Component{
建造师（道具）{
超级（道具）
this.state={grades:[]}
this.schoolDb=this.props.schoolDb
}
组件安装（）{
this.updateGrades（）
这个.schoolDb.changes({
因为:"现在",，
现场直播：真的
}).on（'change'，（change）=>{
this.updateGrades（）
}).on（'错误'，（错误）=>{
控制台错误（err）
})
}
updateGrades（）{
this.schoolDb.allDocs（{include_docs:true}）。然后（（res）=>{
变量等级=res.rows.map（（row）=>row.gradeInfo）
this.setState（{grades}）
})
}
渲染（）{
返回(
职系概览
学生证
学期
时期
{this.state.grades.map（（gradeInfo）=>）}
)
}
}
类DataRow扩展了React.Component{
渲染（）{
设{gradeInfo}=this.props
返回(
{gradeInfo.gradeInfo['studentID']}
{gradeInfo.gradeInfo['sement']}
{gradeInfo.gradeInfo['period']}
)
}
}

在中，我在主app.js文件中这样渲染

<Data schoolDb={this.schoolDb} {...this.props}/>

---

我在运行应用程序时遇到此错误，当执行以下行时，它来自Data.js

：

{this.state.grades.map((gradeInfo) => <DataRow key={gradeInfo._id} gradeInfo={gradeInfo} {...this.props} />)}

{this.state.grades.map（（gradeInfo）=>）}

gradleInfo

尚未初始化。因此出现了错误

修理

---

在呈现组件之前初始化

gradleInfo

。

您在哪个文件中遇到错误，您如何详细说明？我在运行应用程序时遇到此错误，它来自数据。js您确定在查询中得到文档：“this.schoolDb.allDocs（{include_docs:true}）”另外，最好通过执行类似“if（this.state.grades.length>0）…”的操作来控制空响应。当

this.schoolDb.allDocs（{include_docs:true}）

不返回任何成绩信息时，可能会出现这种情况，因为给定的查询没有匹配项。实际上是这样，它现在正在工作。我的查询中没有文档。但是我又犯了一个错误。当应用程序打开时，我不会在文档上保存更多内容，它会给我以下错误：CustomPockError错误：true id:“8bf063c1-a371-4380-a1c9-6ddb6b30f08f”消息：“文档更新冲突”名称：“冲突”状态：409在添加其他信息之前，我必须重新启动应用程序。