2
私はredux-formv6.7.0を使用しています。私はこのlinkを参照し、ボタンのクリックでデータを非同期に読み込もうとしましたが、期待どおりに動作しません。私はcomponentWillReceivePropsにchangeメソッドを使用しましたが、使用した後はそのFieldを編集できません。編集フィールドが機能しません＆redux store-redux-formを使用してフォーム値を管理します
私はchangeメソッドを使用してわからないredux-formで管理する唯一の適切な方法です。 PFBサンプルコードのスニペットをpersonNameのにchangeメソッドを使用してロードした後、そのFieldを編集できません。 personAgeについては、メソッドを使用していないため、Fieldは正常に動作しています。
また、変更されたフォームの値をすべてreduxストアと同期させたいとします（それぞれの変更をすべてreduxストアで更新することを意味します）。
ご協力いただければ幸いです。前もって感謝します。
/* reducers should always maintain immutability */
function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
switch (action.type) {
case "SAVE_PERSON_DATA":
return Object.assign({}, state, action.payload);
default:
return state;
}
}
/* save person data action */
var savePersonData = (data) => {
return {
type: "SAVE_PERSON_DATA",
payload: data
};
};
/* form sample component */
class FormSample extends React.Component {
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
//console.log(nextProps);
const { change } = this.props;
//debugger;
if(nextProps.initialValues) {
change("personName", nextProps.initialValues.personName);
//change("personAge", nextProps.initialValues.personAge);
}
}
loadPersonData() {
const { initialize, savePersonData } = this.props;
var personInfo = {
personName: "Abraham",
personAge: 21
};
savePersonData(personInfo);
}
render() {
return (
<form>
<ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
<ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
<button type="button" onClick={() => this.loadPersonData()}>Load</button>
<h5>Values:</h5>{JSON.stringify(this.props.formValues)}
</form>
);
}
}
FormSample = ReduxForm.reduxForm({
form: "FormSample", // a unique identifier for this form
})(FormSample);
const selector = ReduxForm.formValueSelector("FormSample");
function mapStateToProps(state) {
const { personInfo } = state;
return {
initialValues: personInfo,
formValues: selector(state, "personName", "personAge")
};
}
function mapDispatchToProps(dispatch) {
return Redux.bindActionCreators({
savePersonData
}, dispatch);
}
FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);
const allReducers = Redux.combineReducers({
form: ReduxForm.reducer,
personInfo: PersonInfoReducer
});
const store = Redux.createStore(allReducers);
ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>
<div id="root"></div>
動作していないを編集するための答えを得ました。この[リンク]（https://stackoverflow.com/questions/45763383/load-data-asynchronously-not-working-using-redux-form/）を参照してください。それでも、すべてのフォームの変更を私の 'redux'ストアと同期させる方法の答えが必要です。 –