作为响应，使用redux-form，每次单击按钮时，使用FieldArray在表单中添加字段

Question

在react中，使用redux-form，使用FieldArray在每次单击按钮时在表单中添加字段。共有3个字段。前两个字段是一个下拉列表。在第一个下拉菜单中更改值时，将填充第二个下拉菜单的选项。这在第一次加载时效果很好。 T

问题：假设我添加了3个项目，即该按钮被单击了3次，并且fieldarray现在有3个项目。当我删除第一个项目时，接下来的两个项目必须保持原样，但不会。第二项的值更改为第一项，第三项的值更改为第二项。问题在于用于维护状态的索引。

在下面添加我的代码：

import React from 'react';
import { Field } from 'redux-form';
import { Row, Col } from 'reactstrap';
import { TextInput } from '../../../../shared/components/form/TextInput';
import renderSelectField from '../../../../shared/components/form/Select';
import { UniqueUserCodeLangaugeSupport } from '../../../../constants/UniqueUserCodeManagerConstant';
import DeleteOutlined from '@material-ui/icons/DeleteOutlined';

class AddConditions extends React.Component {
  constructor() {
    super();
    this.state = {
      columnOptions: [],
    }
    this.onChangeColumn = this.onChangeColumn.bind(this);
    this.changeValue = this.changeValue.bind(this);
  }

  componentDidMount() {
    /*
     * to make the array to be given to the eligible column dropdown
    */
    const columnOptions = this.props.selectedTable.columns.map(column => {
      return {
        value: column.id.toString(),
        label: column.name,
        type: column.type
      }
    });
    this.setState({
      columnOptions
    })
  }

  onChangeColumn(index, event) {
    // A better and right way needed to achieve this entire logic
    let conditionOptions;
    this.setState({
      [`column_type${index}`]: event.type
    });
    if(event.type === 'number') {
      conditionOptions = this.props.applicableConditions.number.map(condition => {
        return {
          value: condition.id.toString(),
          label: condition.name
        }
      });
    } else if(event.type === 'text') {
      conditionOptions = this.props.applicableConditions.text.map(condition => {
        return {
          value: condition.id.toString(),
          label: condition.name
        }
      });
    } else if(event.type === 'datetime') {
      conditionOptions = this.props.applicableConditions.datetime.map(condition => {
        return {
          value: condition.id.toString(),
          label: condition.name
        }
      });
    }
    this.setState({
      [`conditionOptions${index}`]: conditionOptions
    })
  }

  changeValue(index, event) {
    console.log("some logic here");
  }


  render() {
    const { fields } = this.props;
    const { columnOptions } = this.state;
    return (
      <div>
    {fields.map((condition, index) => (
      <div className="single-condition-container" key={index}>
        <div className="condition-text">
          <span className="material-table__toolbar-button-active" onClick={() => fields.remove(index)}><DeleteOutlined /></span>
        </div>
        <div className="form__form-group">
          <span className="form__form-group-label">{UniqueUserCodeLangaugeSupport.addEditForm.conditions.field1}</span>
          <div className="form__form-group-field">
            <Field
              name={`${condition}.column_id`}
              component={renderSelectField}
              options={columnOptions}
              placeholder="Select Column"
              onChange={(e) => this.onChangeColumn(index, e)}
            />
          </div>
        </div>
        <div className="form__form-group">
          <span className="form__form-group-label">{UniqueUserCodeLangaugeSupport.addEditForm.conditions.field2}</span>
          <div className="form__form-group-field">
            <Field
              name={`${condition}.condition_id`}
              component={renderSelectField}
              options={this.state[`conditionOptions${index}`]}
              placeholder="Select value"
              onChange={(e) => this.changeValue(index, e)}
            />
          </div>
        </div>
      </div>
    ))}
      <button className="btn btn-outline-primary btn-sm text-uppercase margin-top-30" type="button" onClick={() => fields.push({})} >
        {fields.length > 0 ? 'Add More' : UniqueUserCodeLangaugeSupport.addEditForm.addEligibility}
      </button>
      </div>
    );
  }
}

export default AddConditions;

在父组件中，以上组件呈现为：

<FieldArray name="conditions" component={AddConditions} selectedTable={selectedTable} applicableConditions={applicableConditions} change={this.props.change} />

当我删除第一个项目（例如，其索引为0）时，我的第二个项目（其索引为1）现在位于第0位，并采用conditionOptions0的下拉选项。还有其他任何无需使用基于索引的setState即可使用fieldArray的方法吗？