我在使用redux-form设置初始格式字段值时遇到一些问题。
我正在使用redux-form v6.0.0-rc.3并反应v15.3.0。
所以这是我的问题,我有一个用户网格,当单击用户行时,我导航到“编辑用户”页面,并将用户ID包括在URL中。然后在“编辑用户”页面上,获取ID并调用fetchUser(this.props.params.id),后者是一个返回this.state.users的操作创建者。然后,我尝试通过调用以下命令来设置表格的初始值:
function mapStateToProps(state) { return { initialValues: state.users.user } }
据我了解,这应该将initialValues设置为state.users.user,并且每当更新此状态时,initialValues也应该更新。对我来说不是这样。InitialValues设置为先前单击的用户行(即this.state.users.user的先前状态)。因此,我决定对此进行测试并向该组件添加一个按钮,当单击该组件时,我将再次调用fetchUser,其用户ID硬编码为:
this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
这可以正确更新状态,但initialValues的值不会更改。状态更新时不会更新。我在旧版本的redux-form上测试了完全相同的过程,并且按预期工作。
我在这里做错什么了吗,或者这是我使用的版本的问题?
用户编辑表单-
class UsersShowForm extends Component { componentWillMount() { this.props.fetchUser(this.props.params.id); } onSubmit(props){ console.log('submitting'); } changeUser() { this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3'); } renderTextField(field) { return ( <TextField floatingLabelText={field.input.label} errorText={field.touched && field.error} fullWidth={true} {...field.input} />) } render() { const { handleSubmit, submitting, pristine } = this.props; return( <div> <form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="mdl-cell mdl-cell--12-col"> <Field name="emailAddress" component={this.renderTextField} label="Email Address"/> <Field name="firstName" component={this.renderTextField} label="First Name"/> <Field name="lastName" component={this.renderTextField} label="Last Name"/> </form> <RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true} /> </div> ); } } function mapStateToProps(state) { return { initialValues: state.users.user } } UsersShowForm = reduxForm({ form: 'UsersShowForm' })(UsersShowForm) UsersShowForm = connect( mapStateToProps, actions )(UsersShowForm) export default UsersShowForm
用户减速器-
import { FETCH_USERS, FETCH_USER } from '../actions/types'; const INITIAL_STATE = { all: [], user: {} }; export default function(state = { INITIAL_STATE }, action) { switch (action.type) { case FETCH_USERS: return {...state, all: action.payload }; case FETCH_USER: return {...state, user: action.payload }; default: return state; } }
减速器指数-
import { combineReducers } from 'redux'; import { reducer as formReducer } from 'redux-form'; import usersReducer from './users_reducer'; const rootReducer = combineReducers({ form: formReducer, users: usersReducer }); export default rootReducer;
更新到redux-form v6.0.0-rc.4后,我遇到了同样的问题。
我解决了将enableReinitialize设置为true
UsersShowForm = reduxForm({ form: 'UsersShowForm', enableReinitialize: true })(UsersShowForm)