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;
_
Redux-form v6.0.0-rc.4へのアップデート後、同じ問題に直面していました。
EnableReinitializeをtrueに設定して解決しました
UsersShowForm = reduxForm({
form: 'UsersShowForm',
enableReinitialize: true
})(UsersShowForm)
リソースからのデータを_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()がディスパッチされたときに返される値にもなります。 「初期」値の保存に加えて、フォームを初期化すると既存の値が上書きされます。
公式ドキュメント で詳細と完全な例を見つける