如何將redux-form的fieldArray field.push限制爲3

Question

如何限制redux-form的fieldArray field.push 應該最大爲三。 使用終極版，從例如 版本6.8.0

const renderMembers = ({ fields, meta: { touched, error } }) => (
<ul> 
    <li> 
    <button type="button" onClick={() => fields.push({})}>Add Member</button> 
    {touched && error && <span>{error}</span>} 
    </li> 
    {fields.map((member, index) => 
    <li key={index}> 
    <button 
     type="button" 
     title="Remove Member" 
     onClick={() => fields.remove(index)}/> 
    <h4>Member #{index + 1}</h4> 
    <Field 
     name={`${member}.firstName`} 
     type="text" 
     component={renderField} 
     label="First Name"/> 
    <Field 
     name={`${member}.lastName`} 
     type="text" 
     component={renderField} 
     label="Last Name"/> 
    <FieldArray name={`${member}.hobbies`} component={renderHobbies}/> 
    </li> 
)} 
</ul> 

）

Answer 1

您可以通過有條件的處理程序：

onClick={() => fields.length <= 3 && fields.push({})}