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

回答

相關問題