Question

我使用React为离线应用程序表单做了输入，并构建了一个显示表单的视图，但是视图似乎一直在给出错误，我似乎无法识别它以下是视图的代码：

import React from 'react'

export default class GradeData 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.grade)
  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((grade) => <DataRow key={grade._id} grade={grade} {...this.props} />)}
        </tbody>
      </table>
    </div>
  </div>
)

} }

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

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

} }

以下是表单的代码：

import React from 'react'
import GradeInfo from 'GradeInfo'
import {setUsers, getUsers, filterUsers} from 'UsersApi'
import UserList from 'UserList'

export default class GradeForm extends React.Component {
constructor (props) {
super(props)
this.state = {
  grade: getUsers()
}
this.submitInfo = this.submitInfo.bind(this)
}
componentDidUpdate () {
setUsers(this.state.grade)

}

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

 this.setState({
  grade: [
    ...this.state.grade,
    {gradeInfo}
  ]

})
 this.props.clearCurrentGrade()

}

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

} }

反应Js表单不显示输出

0 个答案: