修复

Question

我正在做一个反应项目。我正在使用pouchdb-browser来保存表单中的数据。现在我想要检索表上的数据但是要获取

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

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

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

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

当我运行应用程序并且它来自Data.js

时，我收到此错误

Answer 1

执行以下行时：

requests.get('https://github.com', verify='/path/to/certfile')

{this.state.grades.map((gradeInfo) => <DataRow key={gradeInfo._id} gradeInfo={gradeInfo} {...this.props} />)}尚未初始化。因此错误。

修复

在渲染组件之前初始化gradleInfo。

未捕获（在承诺中）TypeError：无法读取未定义的属性“_id”

1 个答案:

修复