redux-form remove関数が機能しない

Question

私のフォームに奇妙な問題があります。 2つのボタンを使ってフィールドを追加したり削除したりすることはできますが、削除ボタンは機能しなくなりました。 「@@ 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

私はそれを修正しました。マップ関数に2番目のキーを追加しました。

{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"/>