Reactjs 复选框选择“创建阵列”

我试图创建一组复选框，在选择时创建一个包含多个字段的对象数组。每当我在这里选中一个复选框，它就会出错并要求输入一个键。我有钥匙，所以我有点困惑

路径：

表单组件

export default class RoleAndSkillsFormPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      rolesInterestedIn: [],
    };

    this.handleRoleTypeSelection = this.handleRoleTypeSelectionTwo.bind(this);
  }


  handleRoleTypeSelection(evt){
    evt.preventDefault();

    this.setState({
      rolesInterestedIn: [{
        roleType: evt.target.value,
        yearsOfExpereince: ''
      }]
    })
  }

  render() {
    return (
      <div className="paper">
        <Form className="roleAndSkillsForm" onSubmit={this.handleFormSubmit}>
          <CheckboxGroupTwo
            name={'typeOfWork'}
            options={['Audit - internal', 'Audit - external', 'Tax']}
            label={'What roles are you most interested in? *'}
            controlFunc={this.handleRoleTypeSelection}
          />
        </Form>
      </div>
    );
  }
}

const CheckboxGroup = (props) => (
  <FormGroup controlId={props.name}>
    {props.options.map(opt => {
      console.log(opt);
      return (
        <Checkbox
          name={props.name}
          key={opt}
          onChange={props.controlFunc}
          value={opt}
          checked={opt.selectedOption}
          inline
        >
          {opt}
        </Checkbox>
        );
      })}
    </FormGroup>
  );

  CheckboxGroup.propTypes = {
    name: PropTypes.string,
    options: PropTypes.array,
    selectedOption: PropTypes.string,
    controlFunc: PropTypes.func,
    label: PropTypes.string
  };

---

在给定数组上使用map方法时，请使用index参数并将其传递到key属性中

比如,

const array = ['food', 'drinks', 'clothes'];
array.map((item, index) => {
    <li key={index}>{item}</li>
});

const数组=['food'、'drinks'、'cloth']；
array.map（（项目，索引）=>{
{item}
});

当渲染项没有稳定的ID时，可以使用 作为最后手段的关键项目索引：

const todoItems=todos.map（（todo，index）=>
//仅当项目没有稳定ID时才执行此操作

{todo.text}

);

---

有关键和列表的更多信息，请参阅。

我读过。我不确定使用索引复选框是否正常，或者是否应该以某种方式避免。

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);