Reduxフォーム - FieldsArray - フィールドが空で、長さが0です

Question

私はFieldArrayの例に従おうとしましたが、renderEmployeesでフィールドの長さがゼロになっています。

何が原因なのですか？

class EmployeesContainer extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       {this.props.employees && this.props.employees.length > 0 && 
        <FieldArray name="employees" component={renderEmployees}/> 
       } 
      </div> 
     ); 
    } 
} 

const renderEmployees = ({ fields }) => 
    <div> 
     {fields.map((employee, index) => 
      <div key={index}> 
       <Field name={employee.first_name} type="text" component={renderField} className="cell" inputValue={employee.first_name} /> 
       <Field name={employee.uid} type="text" component={renderField} className="cell" inputValue={employee.uid} /> 
      </div> 
     )} 
    </div>; 

Answer 1

まあ、悪いフォームの減速を使用していた問題は、おそらく時代遅れの例から撮影：

import { reducer as formReducer } from 'redux-form/immutable'; 

その愚かな過ちが、降下エラーメッセージが表示されます。 コースの適切な使用法：

import { reducer as reduxFormReducer } from 'redux-form'; 

Answer 2

あなたは何の従業員を持っていないし、従業員のリストが空であるときにrenderEmployeesコンポーネントをレンダリングしていないので何も、おそらく、レンダリングされていません。

あなたは、少なくとも1人の従業員を持つようにしたい場合は、それが空のアイテムをレンダリングするような方法で、あなたは空の項目に配列を渡す、フォームにinitialValuesを渡すことができます。

これは、提供したFieldsArrayの例の修正版です。最初のメンバーが1人あります。 CodeSandBoxで

const initialValues = { 
    "members": [ 
    { 
     "firstName": "", 
     "lastName": "", 
     "hobbies": [] 
    } 
    ] 
} 

ReactDOM.render(
    <Provider store={store}> 
    <div style={{ padding: 15 }}> 
     <h2>Field Arrays</h2> 
     <FieldArraysForm onSubmit={showResults} initialValues={initialValues} /> 
     <Values form="fieldArrays" /> 
    </div> 
    </Provider>, 
    rootEl, 
); 

例：

https://codesandbox.io/s/DkWkr6Kr5