Question

我试图遵循ONLINE PNG TO SVG CONVERTER示例，但我在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个初始成员。

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

Redux Form - FieldsArray - 字段为空，长度为0

2 个答案: