Redux 表单 - 初始值不随状态更新 [英] Redux Form - initialValues not updating with state
问题描述
我在使用 redux-form 设置初始表单字段值时遇到了一些问题.
我正在使用 redux-form v6.0.0-rc.3 并响应 v15.3.0.
所以这是我的问题，我有一个用户网格，当单击用户行时，我导航到编辑用户页面并在 url 中包含用户 ID.然后在编辑用户页面上，我获取 id 并调用 fetchUser(this.props.params.id)，它是一个返回 this.state.users 的动作创建者.然后我试图通过调用来设置表单初始值:
function mapStateToProps(state) {返回 { 初始值:state.users.user }}根据我的理解，这应该将 initialValues 设置为 state.users.user 并且每当此状态更新时，initialValues 也应该更新.这不是我的情况.InitialValues 被设置为先前单击的用户行(即 this.state.users.user 的先前状态).所以我决定测试这个并向这个组件添加一个按钮，当它被点击时，我再次使用硬编码的用户 ID 调用 fetchUser:
this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
这是正确更新状态，但 initialValues 的值不会改变.状态更新时它不会更新.我在旧版本的 redux-form 上测试了这个完全相同的过程，它按预期工作.
我在这里做错了什么还是我使用的版本有问题.
用户编辑表单 -
class UsersShowForm 扩展组件 {componentWillMount() {this.props.fetchUser(this.props.params.id);}提交(道具){console.log('提交');}更改用户(){this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');}渲染文本字段(字段){返回 (<文本字段floatLabelText={field.input.label}errorText={field.touched &&字段错误}全宽={真}{...field.input}/>)}使成为() {const { handleSubmit, submit, pristine } = this.props;返回(<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"/></表单><RaisedButton onClick={this.changeUser.bind(this)} label="Primary" primary={true}/>);}}函数 mapStateToProps(state) {返回 { 初始值:state.users.user }}UsersShowForm = reduxForm({表单:'UsersShowForm'})(UsersShowForm)UsersShowForm = 连接(mapStateToProps，行动)(UsersShowForm)导出默认 UsersShowForm
用户减速器 -
import {FETCH_USERS,FETCH_USER} 来自'../actions/types';const INITIAL_STATE = { 全部: [], 用户: {} };导出默认函数(状态 = { INITIAL_STATE }，动作){开关(动作.类型){案例 FETCH_USERS:return {...state, all: action.payload };案例 FETCH_USER:返回 {...状态，用户:action.payload };默认:返回状态；}}减速器索引 -
import { combineReducers } from 'redux';import { reducer as formReducer } from 'redux-form';从 './users_reducer' 导入 usersReducer；const rootReducer = combineReducers({形式:formReducer，用户:usersReducer});导出默认的 rootReducer；更新到 redux-form v6.0.0-rc.4 后，我遇到了同样的问题.
我解决了将 enableReinitialize 设置为 true 的问题
UsersShowForm = reduxForm({表单: 'UsersShowForm',启用重新初始化:true})(UsersShowForm)I am having some issues with setting the inital form field values using redux-form.
I am using redux-form v6.0.0-rc.3 and react v15.3.0.
So here's my issue, I have a grid of users and when a user row is clicked on, I am navigating to an edit users page and including the users id in the url. Then on the edit users page, I am grabbing the id and calling fetchUser(this.props.params.id) which is an action creator that returns this.state.users. I am then attempting to set the forms inital values by calling:
function mapStateToProps(state) {
return { initialValues: state.users.user }
}
By my understanding, this should set the initialValues to state.users.user and whenever this state is updated the initialValues should be updated as well. This is not the case for me. InitialValues is being set to the previously clicked on user row (i.e the previous state for this.state.users.user). So I decided to test this and add a button to this component and when its clicked I am calling fetchUser again with a user id hard coded in:
this.props.fetchUser('75e585aa-480b-496a-b852-82a541aa0ca3');
This is updating the state correctly but the values for initialValues do not change. It is not getting updated when the state is updated. I tested this exact same process on an older version of redux-form and it worked as expected.
Am I doing something wrong here or is this an issue with the version I am using.
Users Edit 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
Users Reducer -
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;
}
}
Reducer Index -
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;
I was facing the same problem after update to redux-form v6.0.0-rc.4.
I solved setting enableReinitialize to true
UsersShowForm = reduxForm({
form: 'UsersShowForm',
enableReinitialize: true
})(UsersShowForm)
这篇关于Redux 表单 - 初始值不随状态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
