removex-form remove функция не работает

Question

У меня странная проблема с моей формой. Я могу добавлять и удалять поля с двумя несколькими кнопками, но кнопка удаления перестала работать. Я вижу, что при щелчке по-прежнему срабатывает действие «@@ redux-form/ARRAY_REMOVE», но поле не исчезает. Я не знаю, почему он перестает работать, я попытался отменить весь код, который я написал впоследствии, но не смог отследить ошибку. Буду признателен за любой вклад. Вот мой код:

import React from 'react'; 
import TextField from 'material-ui/TextField'; 
import { Field, FieldArray, reduxForm} from 'redux-form'; 
import validate from './validate'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); //Needed, otherwise an error message is shown in the console 

const renderTextField = ({input, label, meta: {touched, error}, ...custom}) => (
    <TextField 
    hintText={label} 
    floatingLabelText={label} 
    errorText={touched && error} 
    {...input} 
    {...custom} 
    /> 
); 

const renderUsers = ({fields, meta: { touched, error }}) => (
    <div> 
    <div> 
     <button className="btn btn-primary" 
       type="button" onClick={() => fields.push({})}> 
     <span className="glyphicon glyphicon-plus-sign"/> Add User 
     </button> 
     {touched && error && <span>{error}</span>} 
    </div> 

    {fields.map((index) => 
    <div key={index}> 

     <Field name={`${index}.firstName`} component={renderTextField} label="First Name"/> 

     <Field name={`${index}.lastName`} component={renderTextField} label="Last Name"/> 

     <Field name={`${index}.position`} component={renderTextField} label="Position"/> 

     <Field name={`${index}.email`} component={renderTextField} label="Email"/> 

     <button className="btn btn-xs btn-danger" 
       type="button" 
       title="Remove User" 
       onClick={() => fields.remove(index)}> 
      <span className="glyphicon glyphicon-minus-sign"/> 
     </button> 
    </div> 
)} 
</div> 
); 

const UserCreation = (props) => { 
    const { handleSubmit, pristine, reset, submitting} = props; 

    return (
    <form onSubmit={handleSubmit}> 

     <FieldArray name="users" component={renderUsers}/> 

     <div> 
     <button className="btn btn-primary btn-success" 
       type="submit" 
       disabled={pristine || submitting}> 
      <span className="glyphicon glyphicon-send" /> 
      Submit 
     </button> 
     {' '} 
     <button type="button" 
       className="btn btn-primary btn-danger" 
       disabled={ pristine || submitting} 
       onClick={reset}> 
      Cancel 
     </button> 
     </div> 
    </form> 
); 
} 

export default reduxForm({ 
    form: 'UserCreationForm', 
    validate 
})(UserCreation); 

Вот снимок из моей консоли при попытке удалить поле:

console.log of action

Answer 1

Я установил ее. Я добавил второй ключ к функции карты:

{fields.map((user, index) => 
    <div key={index}> 

     <Field name={`${user}.firstName`} component={renderTextField} label="First Name"/> 

     <Field name={`${user}.lastName`} component={renderTextField} label="Last Name"/> 

     <Field name={`${user}.position`} component={renderTextField} label="Position"/> 

     <Field name={`${user}.email`} component={renderTextField} label="Email"/>