我在使用redux-form时遇到了麻烦。我正在标准的CRUD应用程序中创建一个更新/编辑页面,我似乎无法获取表单来获取其初始值。这是我的代码:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { updateArtwork, fetchPiece } from '../actions';
class UpdateArtwork extends Component {
componentDidMount() {
const { id } = this.props.match.params;
this.props.fetchPiece(id);
}
renderField(field) {
return (
<div className="input-field">
<input
placeholder={field.label}
type="text"
{...field.input}
/>
</div>
);
}
onSubmit(values) {
const { updateArtwork, history } = this.props;
const { id } = this.props.match.params;
updateArtwork(id, values, history);
}
render() {
const { handleSubmit, piece } = this.props;
return (
<div className="card-panel">
<h4>Edit this piece.</h4>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field
label="Artwork URL"
name="image"
component={this.renderField}
/>
<Field
label="Artist"
name="artist"
component={this.renderField}
/>
<Field
label="Class"
name="teacher"
component={this.renderField}
/>
<Field
label="Grade"
name="level"
component={this.renderField}
/>
<Field
label="Description"
name="description"
component={this.renderField}
/>
<button
type="submit"
className="waves-light waves-effect btn"
>
Submit
</button>
<Link
to={`/artwork/show/${piece._id}`}
style={{ margin: '0 5px' }}
className="waves-light waves-effect btn"
>
Cancel
</Link>
</form>
</div>
);
}
}
const mapStateToProps = ({ artwork }, ownProps) => {
return {
piece: artwork[ownProps.match.params._id],
initialValues: artwork[ownProps.match.params._id]
};
};
export default reduxForm({
form: 'UpdateArtworkForm',
enableReinitialize: true
})(
connect(mapStateToProps, { updateArtwork, fetchPiece })(withRouter(UpdateArtwork))
);
我在网上搜索中发现的最常见问题是我的mapStateToProps函数中包含initialValues prop,并在我的reduxForm配置中包含“enableReinitialize:true”。我已经做了这两件事,但我仍然没有。
作为旁注,此组件中的其他所有内容都有效。该片段使用更新的输入中的任何内容正确更新,并且我的fetchPiece()操作正确地获取该片段与在显示页面中完全相同。所有正确的信息都位于我的网络选项卡中的对象中。我似乎无法将其加载到表单中。
我在这里缺少什么?
编辑:artwork [ownProps.match.params._id]返回以下内容:
{_id: "5a15ecb8d6cfbe0c4e68b3be", artist: "Ceanne", teacher: "Royals", level: "14", description: "Derek and Ceanne at the Royals game.", …}
artist: "Ceanne"
comments: (3) [{…}, {…}, {…}]
created: "2017-11-22T21:31:36.849Z"
description: "Derek and Ceanne at the Royals game."
image: "https://res.cloudinary.com/drkgrntt/image/upload/v1511386296/raixtyabfjrosvnnfavs.jpg"
level: "14"
teacher: "Royals"
__v: 8
_id: "5a15ecb8d6cfbe0c4e68b3be"
__proto__: Object
答案 0 :(得分:1)
从我提到的here方式可以看出的差异是,在将组件连接到redux存储之后,reduxForm HOC被包装。然而,在该示例中反之亦然。你能按照下面的代码进行出口吗?
UpdateArtworkForm = reduxForm({
form: 'UpdateArtworkForm',
enableReinitialize: true
})(UpdateArtwork)
export default connect(
({ artwork }, ownProps) => {
return {
piece: artwork[ownProps.match.params._id],
initialValues: artwork[ownProps.match.params._id]
};
},
{ updateArtwork, fetchPiece }
)(withRouter(UpdateArtworkForm))
我建议的另一种方法是,在父组件中,呈现UpdateArtworkForm
,尝试connect
与商店,获取道具并将其作为initialValues
传递给redux-form
假设您有一个组件Create
,您在其中呈现UpdateArtworkForm
,它可以作为
class Create extends React.Component {
render() {
return <UpdateArtworkForm initialValues={artwork[ownProps.match.params._id]}
}
}