Redux表单-初始值不随状态更新

Question

我在使用redux-form设置初始表单字段值时遇到了一些问题。

我使用redux-form v6.0.0-rc。3. react v15.3.0.

所以这是我的问题，我有一个网格的用户，当用户行被点击，我导航到一个编辑用户页面，并在url中包括用户id。然后在编辑用户页面上，我正在抓取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上测试了这个完全相同的过程，结果和预期的一样。

是我在这里做错了什么，还是我使用的版本有问题。

Users编辑表单-

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;
    }
}

减速器索引-

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;

Answer 1

我在更新到redux-form v6.0.0-rc.4后遇到了同样的问题。

我解决了将enableReinitialize设置为true

UsersShowForm = reduxForm({
  form: 'UsersShowForm',
  enableReinitialize: true
})(UsersShowForm)

Answer 2

要用资源中的数据预填充redux-form表单，您将使用initialValues prop，该prop在用reduxForm连接器装饰组件/容器时自动读取。重要的是，initialValues中的键与表单字段上的name匹配。

注意:必须先应用reduxForm()装饰器，然后再应用redux中的connect()。

使用redux-form 7.2.3:

const connectedReduxForm = reduxForm({
 form: 'someUniqueFormId',
  // resets the values every time the state changes
  // use only if you need to re-populate when the state changes
  //enableReinitialize : true 
})(UserForm);
export default connect(
  (state) => { 
    // map state to props
    // important: initialValues prop will be read by redux-form
    // the keys must match the `name` property of the each form field
    initialValues: state.user 
  },
  { fetchUser } // map dispatch to props
)(connectedReduxForm) 

来自官方文档:

提供给initialValues prop或reduxForm()配置参数的值将被加载到表单状态中，然后被视为"原始"。它们也是在分派reset()时返回的值。除了保存"原始"值之外，初始化表单将覆盖任何现有值。

在官方文档

Answer 3

在我的情况下，我有Redux表单，2路由与小url参数的变化。在组件之间切换时，道具没有得到更新。它一直显示空白表单。

示例:baseurl/:id/personal -> baseurl/:id/employment

调试后，我发现mapStateToProps在初始值设置时不会触发。

<React.Fragment>
  <Route
    exact={true}
    path="/path1"
    component={PersonalDetails}
    key="personal"
  />
  <Route
    exact={true}
    path="/path1/employment"
    component={Employment}
    key="employment"
  />
</React.Fragment>

设置destroyOnUnmount为false mapStateToProps修复了我的问题，它的默认值是true。

    enableReinitialize: true,
    destroyOnUnmount: false

使用示例:

UsersShowForm = reduxForm({
  form: 'UsersShowForm',
  enableReinitialize: true,
  destroyOnUnmount: false
})(UsersShowForm)

阅读更多:destroyOnMount