1
私は自分の店舗から値が入力されたReduxフォームを読み込もうとしています。しかし、私はnull以外の何かを得ることができません。これは何時間か今のところであり、いくつかの例を読んでいて、違うことをしようと思っています。Redux-Form初期値
このRedux Form Initializing from State example
- Reduxの後：3.6.0
- リアクト - Reduxの：5.0.3
- Reduxのフォーム：6.6.3
- が反応：15.4.2
フォームである子コンポーネントをレンダリングしている親コンポーネントがあります。簡潔にするために、最低限のコードを入れて、可能な限り一般的な名前にしてください。すべてがうまくロードされますが、問題は私の店に正しく接続していないことに依存していると思います。それとも、私はちょうどcomponentWillMountのデータをロードする必要がありますか？
親コンポーネント：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from '../actions/usersActions';
import ChildForm from './ChildForm.jsx'
@connect((store) => {
return{
user: store.users.user
}
})
export default class Parent extends Component{
componentWillMount(){
this.props.dispatch(fetchUser(this.props.match.params.id))
}
submit = (values) => {//do some stuff}
render(){
return(
<ChildForm onSubmit={this.submit} />
);
}
}
ChildForm：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { user } from './reducers/usersReducer.js';
class ChildForm extends Component{
render(){
console.log('FORM STATE >>>>>>>>>>', this.state); //Returns NULL
const { handleSubmit } = this.props;
return(
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="first_name" component="input" type="text"/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}
ChildForm = reduxForm({
form: 'childForm',
enableReinitialize : true // I found this in another SO Example
})(ChildForm);
ChildForm = connect(
state => ({
user: state.user,
initialValues: state.user
}),
{ fetchUser }
)(ChildForm)
export default ChildForm;
usersReducer.js
export default function reducer(state={
user: {},
}, action){
switch (action.type){
case "FETCH_USER_FULFILLED":{
return{
...state,
user: action.payload
}
}
}
return state;
}
これは私が現在いる場所です。ページを取得し、フォームを作成し、すべての作業を送信できます。しかし、私はStoreの値をフォームフィールドの外に出す方法を見つけることができません。どんな助けでも大歓迎です。