Reactjs React Redux表单初始化

我在一个博客页面上工作，你可以点击一个按钮，打开一个模式来编辑文章下的评论

在帖子详情页面上，我有：

openEditCommentModal = (id) => {
    this.setState(() => ({
    editCommentModalOpen: true,
}))
    this.props.fetchCommentById(id)
}

在编辑注释文件中，我有：

const mapStateToProps = state => {
    return {
        initialValues: state.commentContainer.selectedComment
    }
}

所以我做了两件事： 1.开放模态 2.调用fetchCommentById（id），以便更新state.commentContainer.selectedComment

Post Details页面是父组件，而edit comment表单是子组件

我需要给编辑表单赋予initialValue。initialValue是注释的原始内容，用户可以对其进行编辑

奇怪的是，当我第一次点击编辑按钮时，没有初始值。这是一个空的物体。因此我有一个空表。 当我关闭模态并重新打开它时，initialValue被更新为我想要的注释，编辑注释表单现在拥有所有原始内容

我不明白为什么openEditCommentModal不能第一次更新状态。有人能帮忙吗

==============

解决的问题： 在reduxForm中，执行以下操作：

启用重新初始化：true

在帖子详细信息页面：

openEditCommentModal = (id) => {
        this.setState(() => ({
        editCommentModalOpen: true,
    }))
        this.props.fetchCommentById(id)
    }

<Modal
          className='modal'
          overlayClassName='overlay'
          isOpen={editCommentModalOpen}
          onRequestClose={this.closeEditCommentModal}
          contentLabel='Modal'
        >
         <div>
           <EditComment />
           <button onClick={() => this.closeEditCommentModal()}>Close</button>
           </div>
        </Modal>

编辑注释组件：

import React, { Component } from "react";
import { Field, reduxForm } from 'redux-form'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { fetchCommentById } from '../Actions'
// import { updateComment } from '../Actions'
const randomID = require("random-id")

class EditComment extends Component {


  renderField = (field) => {
    const { meta: { touched, error } }  = field
    const className = `form-group ${ touched && error ? 'has-danger' : '' }`

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input 
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''}
        </div>
      </div>
    )
  }

  onSubmit = (values) => {
    const id = values.id
    let newValues = {}
    newValues.body = values.body
  //  this.props.updatePost(newValues, id, this.props.history.push(`/post/${id}`) )
  }

  render() {

    console.log('this.props.initialValue', this.props.initialValues)

    if(!this.props.initialValues) {
      return <div></div>
    } 




    const { handleSubmit, categories, id } = this.props

    return (
      <div>
        <h1>Edit Comment</h1>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            label="Content"
            name="body"
            component={this.renderField}
          />
          <span>Author: </span><span>{this.props.initialValues.author}  </span>
          <span>Time: </span><span>{this.props.initialValues.timestamp}</span>
          <div>
          <button type="submit">Submit</button> 

          </div>
        </form>
      </div> 
    )
  }
}
const validate = (values) => {
  const errors = {}

  if(!values.title) {
    errors.title = "Enter a title"
  }
  if(!values.category) {
    errors.category = "Enter a category"
  }
  if(!values.content) {
    errors.content = "Enter some content"
  }
  return errors
}

const mapStateToProps = state => {
  return {
    initialValues: state.commentContainer.selectedComment
  }
}


EditComment = reduxForm({
  validate,
  form: 'CommentEditForm',
  enableReinitialize : true
})(EditComment)


export default connect(mapStateToProps, { fetchCommentById })(EditComment)

import React，{Component}来自“React”；
从“redux form”导入{Field，reduxForm}
从“react router dom”导入{Link}
从“react redux”导入{connect}
从“../Actions”导入{fetchCommentById}
//从“../Actions”导入{updateComment}
const randomID=require（“随机id”）
类EditComment扩展组件{
renderField=（字段）=>{
常量{meta:{toucted，error}}=field
const className=`form group${moved&&error？'has danger'：'}`
返回(
{field.label}
{触摸？错误：“”
)
}
onSubmit=（值）=>{
const id=values.id
设newValues={}
newValues.body=values.body
//this.props.updatePost（newValues，id，this.props.history.push（`/post/${id}`）））
}
render（）{
log（'this.props.initialValue'，this.props.initialValue）
如果（！this.props.initialValues）{
返回
} 
const{handleSubmit，categories，id}=this.props
返回(
编辑评论
作者：{this.props.initialValues.Author}
时间：{this.props.initialValues.timestamp}
提交
)
}
}
常量验证=（值）=>{
常量错误={}
如果（！values.title）{
errors.title=“输入标题”
}
如果（！values.category）{
errors.category=“输入类别”
}
如果（！values.content）{
errors.content=“输入一些内容”
}
返回错误
}
常量mapStateToProps=状态=>{
返回{
初始值：state.commentContainer.selectedComment
}
}
EditComment=reduxForm({
验证
表单：“CommentEditForm”，
启用重新初始化：true
})（编辑评论）
导出默认连接（MapStateTrops，{fetchCommentById}）（EditComment）

我检查了您的代码并搜索了您的问题，我发现您必须启用表单的初始化以与数据绑定，因此您需要执行以下操作：

EditComment = reduxForm({
  validate,
  form: 'CommentEditForm',
  enableReinitialize : true // you need to add this property
})(EditComment)

---

您在控制台中收到了哪些错误？完全没有错误…当我在editComment文件上输入console.log（this.props.initialValue）时，第一次单击edit时，得到了一个空对象。如果我关闭模式并再次打开它，则输入console.log（this.props.initialValue）将成为我需要的注释对象您有任何http请求包括在该过程中吗？导出const fetchCommentById=id=>dispatch=>{ReadableAPI.getCommentById（id）。然后（comment=>{dispatch（{type:FETCH_comment_BY_id，payload:comment}。）catch（err=>console.log（err））；}；

EditComment = reduxForm({
  validate,
  form: 'CommentEditForm',
  enableReinitialize : true // you need to add this property
})(EditComment)