我正在尝试用来自API的数据填写个人资料表单。不幸的是,在这种情况下,redux-form不想与我合作。由于某些原因,无论我做什么,字段都保持为空。
出于某些原因,设置固定值而不是从reducer传递的值效果很好。
也许这是因为我在动作创建者内部对API调用使用了 redux-promise ?我如何忍受它并摆脱它。这是我的表单组件。
import React, { Component } from 'react'; import { reduxForm, Field } from 'redux-form'; import { connect } from 'react-redux'; import { fetchRoleList, fetchUserData } from '../actions'; class UserEdit extends Component { componentWillMount() { this.props.fetchRoleList(); this.props.fetchUserData(); } handleEditProfileFormSubmit(formProps) { console.log(formProps); } getRoleOptions(selected_id) { if (!this.props.profile) { return <option>No data</option>; } return this.props.profile.roles.map(role => { return <option key={role.role_id} value={role.role_id}>{role.name}</option>; }); } renderField(props) { const { input, placeholder, label, value, type, meta: { touched, error } } = props; return ( <fieldset className={`form-group ${ (touched && error) ? 'has-error' : '' }`}> <label>{label}</label> <input className="form-control" {...input} type={type} placeholder={placeholder} /> {touched && error && <div className="error">{error}</div>} </fieldset> ); } renderSelect({ input, placeholder, options, label, type, meta: { touched, error } }) { return ( <fieldset className={`form-group ${ (touched && error) ? 'has-error' : '' }`}> <label>{label}</label> <select className="form-control" {...input}> {options} </select> {touched && error && <div className="error">{error}</div>} </fieldset> ); } render() { const { handleSubmit } = this.props; const user = this.props.profile.user; return ( <div> {user ? user.email : ''} <form onSubmit={handleSubmit(this.handleEditProfileFormSubmit.bind(this))}> <Field name="email" label="Email:" component={this.renderField} type="text" placeholder="[email protected]" className="form-control"/> <Field name="name" label="Name:" component={this.renderField} type="text" placeholder="John Doe" className="form-control"/> <Field name="role" label="Role:" component={this.renderSelect} type="select" className="form-control" options={this.getRoleOptions()}/> <button action="submit" className="btn btn-primary">Edit user</button> <Field name="password" label="Password:" component={this.renderField} type="password" className="form-control"/> <Field name="passwordConfirm" label="Confirm Password:" component={this.renderField} type="password" className="form-control"/> { this.props.errorMessage && <div className="alert alert-danger"> <strong>Oops!</strong> {this.props.errorMessage} </div> } <button action="submit" className="btn btn-primary">Sign up!</button> </form> </div> ); } } let InitializeFromStateForm = reduxForm({ form: 'initializeFromState' })(UserEdit); InitializeFromStateForm = connect( state => ({ profile: state.profile, initialValues: state.profile.user }), { fetchRoleList, fetchUserData } )(InitializeFromStateForm); export default InitializeFromStateForm;
我相信动作创建者也将很有用:
export function fetchUserData(user_id) { user_id = user_id ? user_id : ''; const authorization = localStorage.getItem('token'); const request = axios.get(`${ROOT_URL}/user/${user_id}`, { headers: { authorization } }); return { type: FETCH_USER, payload: request }; }
您需要添加enableReinitialize: true如下内容。
enableReinitialize: true
let InitializeFromStateForm = reduxForm({ form: 'initializeFromState', enableReinitialize : true // this is needed!! })(UserEdit)
如果您的initialValues属性得到更新,那么您的表格也会更新。