web-dev-qa-db-ja.com

Reduxフォーム-initialValuesが状態とともに更新されない

Redux-formを使用して初期フォームフィールドの値を設定するときに問題が発生します。

Redux-form v6.0.0-rc.3を使用しており、v15.3.0に対応しています。

だからここに私の問題があり、ユーザーのグリッドがあり、ユーザー行をクリックすると、ユーザーの編集ページに移動し、URLにユーザーIDを含めます。次に、ユーザーの編集ページで、IDを取得し、this.state.usersを返すアクション作成者であるfetchUser（this.props.params.id）を呼び出しています。次に、以下を呼び出すことにより、フォームの初期値を設定しようとしています。

_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;
_
reactjsreduxreact-reduxredux-form
18
country_dev

Redux-form v6.0.0-rc.4へのアップデート後、同じ問題に直面していました。

EnableReinitializeをtrueに設定して解決しました

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

リソースからのデータを_redux-form_フォームに事前入力するには、initialValuesコネクタでコンポーネント/コンテナを装飾するときに自動的に読み込まれるreduxForm propを使用します。 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（）がディスパッチされたときに返される値にもなります。 「初期」値の保存に加えて、フォームを初期化すると既存の値が上書きされます。

公式ドキュメント で詳細と完全な例を見つける

7
Arian Acosta