Javascript 我想使用react和DB编辑和更新文档

我正在使用react和PockDB，并已开始保存文档。我还在一个简单的表上检索文档。但是我正在寻找在数据库中编辑和更新文档的最佳方法

以下是我从表单中保存记录的代码：

submitInfo (event) {
    event.preventDefault()

    let schoolData = Object.assign({}, this.props.doc)

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

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

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

return (
      <div className='form'>
        <form action='' onSubmit={this.submitInfo}>
          <div className='form__container'>
          <RegistrationInfo {...doc.RegistrationInfo} />
          <button className='button expanded' type='submit'>Save</button>
          </div>
        </form>
      </div>
    )

下表：

return (
      <div >
        <div >
        </div>
        <div className='table-list'>
          <table>
            <thead>
              <tr>
                <th>Registration Type</th>
                <th>First Name</th>
                <th>Middle Name</th>
              </tr>
            </thead>

            <tbody>
              {this.state.docs.map((doc) => <Data key={doc._id} doc={doc} {...this.props} />)}
            </tbody>
          </table>
        </div>
      </div>
    )

返回(
注册类型
名字
中名
{this.state.docs.map（（doc）=>）}
)

数据：

class Data extends React.Component {
  render () {
    let {doc} = this.props

    return (
      <tr>
        <td>{doc.RegistrationInfo['registrationtype']}</td>
        <td>{doc.RegistrationInfo['firstname']}</td>
        <td>{doc.RegistrationInfo['middlename']}</td>
      </tr>
    )
  }
}

类数据扩展React.Component{
渲染（）{
设{doc}=this.props
返回(
{doc.RegistrationInfo['registrationtype']}
{doc.RegistrationInfo['firstname']}
{doc.RegistrationInfo['middlename']}
)
}
}

---

如何编辑和更新表上的文档？

如果没有redux和路由器，您可以在表前添加表单组件（您没有发布名称，因此我假设它名为

YourFormComponent

）：

return (
  <div>
    <div>
      {this.state.editId && <YourFormComponent data={this.state.docs[this.state.editId]} />
    </div>
    <div className='table-list'>
      <table>
        <thead>
          <tr>
            <th>Registration Type</th>
            <th>First Name</th>
            <th>Middle Name</th>
          </tr>
        </thead>

        <tbody>
          {this.state.docs.map((doc) => <Data key={doc._id} doc={doc} {...this.props} onEdit={() => this.setState({editId: doc._id})}/>)}
        </tbody>
      </table>
    </div>
  </div>
)

还要确保在submitInfo函数中将editId设置为undefined

这段代码有点简单和脆弱（并且没有遵循最佳实践），但您应该明白：您需要一个按钮来编辑一行，一个动作来响应并设置文档的状态。单击“编辑”按钮时要编辑的id，以及一个组件来在设置该id时呈现表单

---

希望有帮助

你目前的工作是什么？你的确切问题在哪里？从您的代码中，我可以猜到表的呈现是正确的。你也有一个工作表。但似乎你无法将两者联系起来。您是否愿意引入路由库（如React Router）或状态管理库（如Redux（和Redux表单））？我会使用它们，但如果您没有使用它们的经验，请注意：这是一个非常复杂的步骤。如果你想使用简单的react，我也可以指导你，但无论如何你都需要一些手动状态管理代码。@BernhardGschwantner，无论哪种方式最好都会对我有好处。我希望能够单击表行，并在表单上填充该文档的详细信息，以进行编辑和保存。我的问题是如何编辑记录并保存它。到目前为止，我还不熟悉react redux，如果你认为这是更好的方式，也许你可以向我介绍一下。对于redux，最好观看作者在Egghead上的免费视频课程：

return (
  <div>
    <div>
      {this.state.editId && <YourFormComponent data={this.state.docs[this.state.editId]} />
    </div>
    <div className='table-list'>
      <table>
        <thead>
          <tr>
            <th>Registration Type</th>
            <th>First Name</th>
            <th>Middle Name</th>
          </tr>
        </thead>

        <tbody>
          {this.state.docs.map((doc) => <Data key={doc._id} doc={doc} {...this.props} onEdit={() => this.setState({editId: doc._id})}/>)}
        </tbody>
      </table>
    </div>
  </div>
)

class Data extends React.Component {
  render () {
    let {doc, onEdit} = this.props

    return (
      <tr>
        <td>{doc.RegistrationInfo['registrationtype']}</td>
        <td>{doc.RegistrationInfo['firstname']}</td>
        <td>
          {doc.RegistrationInfo['middlename']}
          <button onClick={onEdit}>Edit</button>
        </td>
      </tr>
    )
  }
}