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

没有呈现任何内容，可能是因为您没有员工，并且当员工列表为空时您没有呈现 renderEmployees 组件。

如果您希望至少有 1 名员工，以呈现空项的方式，您可以将 initialValues 传递给表单，传递带有空项的数组。

这是您提供的 FieldsArray 示例的修改版本，其中有 1 个初始成员。

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,
);

CodeSandBox 中的示例：

https://codesandbox.io/s/DkWkr6Kr5

Answer 2

嗯，问题是使用了错误的减速器，可能取自过时的示例：

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

这是一个愚蠢的错误，但我希望看到下降错误消息。当然正确的用法是：

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

Redux 表单 - FieldsArray - 字段为空，长度为 0

Redux Form - FieldsArray - fields is empty, length is 0

reactjs

redux

redux-form