首页 文章

Redux表单 - initialValues不用状态更新

提问于
浏览 次
15

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

我正在使用redux-form v6.0.0-rc.3并对v15.3.0做出反应 .

所以这是我的问题，我有一个用户网格，当点击用户行时，我导航到编辑用户页面并在网址中包含用户ID . 然后在编辑用户页面上，我 grab 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的先前状态） . 所以我决定测试这个并为这个组件添加一个按钮，当它被点击时，我再次使用硬编码的用户ID调用fetchUser：

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;
reactjs redux react-redux redux-form

2 回答

  • 6

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

    我解决了将enableReinitialize设置为true的问题

    UsersShowForm = reduxForm({
  form: 'UsersShowForm',
  enableReinitialize: true
})(UsersShowForm)
    回复于
  • 34

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

    Note: It is necessary to first apply the reduxForm() decorator, and then the connect() from redux. It will not work the other way around.

    使用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（）配置参数的值将加载到表单状态，然后作为“pristine”处理 . 它们也是调度reset（）时将返回的值 . 除了保存“原始”值之外，初始化表单还会覆盖任何现有值 .

    在official documentation中查找更多信息和完整示例

    回复于

相关问题