Redux Fromを使ってフォームのstate管理をしているのですが、Fieldコンポーネントに値が渡らず、テキストフィールドに渡ってきた値が表示されません。
initialValues
をコンポーネントに渡してコンソールで確認するとredux-form/INITIALIZE
が配列の中身の数だけ発火しており、オブジェクトが上書きされているようでした。
enableReinitialize: true
で設定しています。
const initialValues = [ { id: 1, name: 'name1', number: 'number1' }, { id: 2, name: 'name2', number: 'number2' }, { id: 3, name: 'name3', number: 'number3' }, ]; class Parent extends React.Component { render() { return( initialValues.map((initialValue, i) => { return ( <Child initialValues={initialValue} key={i} /> ); }) ) } }
class Child extends React.Component { renderTextField = field => { const { input, type } = field; return ( <input {...input} type={type} /> ); }; render() { return( <tr> <td>{this.props.initialValues.name}</td> <td> <Field component={this.renderTextField} type="text" name="number" /> </td> </tr> ) } } export default reduxForm({ form: 'sampleForm', enableReinitialize: true, })(Child )
あなたの回答
tips
プレビュー