enter image description here enter image description here我正在开发一个博客页面,您可以单击一个按钮并打开一个模式来编辑帖子下的评论。
在帖子详细信息页面上,我有:
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
帖子详情页为父组件,编辑评论表单为子组件。
我需要为编辑表单提供初始值。初始值是评论的原始内容,然后用户可以对其进行编辑。
奇怪的是,当我第一次单击编辑按钮时,没有初始值。这是一个空物体。因此我有一个空表格。 当我关闭模式并重新打开它时,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>
............
const mapDispatchToProps = dispatch => {
return {
fetchByPostId: id => dispatch(fetchByPostId(id)),
deleteByPostId: id => dispatch(deleteByPostId(id)),
deleteByCommentId: id => dispatch(deleteByCommentId(id)),
vote: (id, option) => dispatch(vote(id, option)),
fetchComments: id => dispatch(fetchComments(id)),
fetchCommentById: id => dispatch(fetchCommentById(id))
};
};
编辑评论组件:
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)
最佳答案
我检查了你的代码并搜索了你的问题,我发现了这个answer您必须启用表单的初始化才能与您的数据绑定(bind),所以您需要做什么:
EditComment = reduxForm({
validate,
form: 'CommentEditForm',
enableReinitialize : true // you need to add this property
})(EditComment)
关于reactjs - React Redux 表单初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45910638/