redux-form 删除功能不起作用答案

【问题标题】：redux-form remove function doesn't workredux-form 删除功能不起作用
【发布时间】：2017-02-05 11:10:54
【问题描述】：

我的表单有一个奇怪的问题。我可以使用两个按钮添加和删除字段，但删除按钮已停止工作。我可以看到仍然单击“@@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

【问题讨论】：

标签： redux react-redux redux-form

【解决方案1】：

我修好了。我在 map 函数中添加了第二个键：

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

【讨论】：