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

我试图按照FieldArray示例，但我在renderEmployees中获得了长度为零的字段 - 不显示任何内容。Redux表单 - FieldsArray - 字段为空，长度为0

可能是什么原因？

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

来源

2017-08-13 chenop

你能分享一下完整的代码吗？在原始代码中，有一个按钮（在'renderEmployees'中）用于在单击时修改'fields'的内容。但我没有看到你的。 – Win

确实 - 这是因为我从BE获得了员工名单，并且我通过initialValues prop注入了它 - 我认为它超出了这个问题的范围，我错了吗？ – chenop

好了，用坏的形式减速的问题，可能是由一个过时的例子采取：

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

它是一个愚蠢的错误，但我期待一个下降错误消息。 of course的正确用法是：

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

来源

2017-08-13 18:11:59 chenop

没有被渲染，很可能是因为你没有员工当员工列表是空的，你不会使renderEmployees组件。

如果您希望至少有一名员工以这样一种方式呈现空项目，则可以将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

来源

2017-08-13 15:43:01

谢谢，但员工正在传递给表单... – chenop

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

回答

相关问题