复选框选择创建数组

Question

>我正在尝试创建一组复选框，这些复选框在选择时会创建一个具有多个字段的对象数组。每当我在此处选中复选框时，它都会出错并要求输入密钥。我有一把钥匙，所以我有点困惑。

路径：Form Component

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>
);
}
}

路径：Checkboxgroup Component

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
};

Answer 1

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

例如;

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

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

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

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