Javascript ReactJS管理大量的选择状态

考虑到我有这个代码（我删除了很多精选项目，所以这不是一个庞大的列表，但会有额外的20个左右）：

import*as React from“React”；
从“tabler react”导入{Form，Card，Grid}；
从“语义ui反应”导入{Button}；
类技能扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showSaveButton:false，
showCancelButton:false，
};
}
onChange=（事件）=>{
这是我的国家(
{
showSaveButton:true，
showCancelButton:true，
});
}
取消更改=（）=>{
这是我的国家(
{
showSaveButton:false，
showCancelButton:false，
});
}
render（）{
返回(
顶尖技能
);
}
}
输出默认技能；

当前的功能是，更改时，将显示两个按钮，分别为“取消”或“接受”。 我需要以下功能，但除非我有60多个状态（每个选项都有一个初始状态和一个工作状态），否则我无法解决如何实现这一点，这似乎很荒谬：

• 初始状态是从JSON数组中的数据库中提取的，因此该数组中显示的所有内容都应以选中状态开始（checked=true）。例如，如果数组为[“通信”，“时间管理”]，我需要将通信和时间管理选项设置为checked=true
• 需要保存初始状态，这样，如果有任何更改，然后用户单击“取消”，则每个选项的选中布尔值将重置为原来的值
• 如果单击accept，则需要将信息发送到数据库，因此需要知道哪些选项已选中=true，并能够获取它们的名称

---

那么，有没有一种方法可以在没有大量状态的情况下实现这一点呢？

您可以做的是为所有60个状态创建一个映射。从数据库中获取结果后，将其存储在状态中，并使用字段跟踪检查和更改的状态：

// isDirty is a flag to say there are pending changes on the option
const options = arrayFromDatabase.map(arrayElement => ({ name: arrayElement, checked: true, isDirty: false })

然后将该数组存储在您所在的州，例如

this.setState({...this.state, options })

进行更改时，将特定选项标记为dirty->

isDirty=true

。如果取消，请将该标志翻转回false->

isDirty=false

Should look something like, 

this.setState({ 
    ...state, 
    options: this.state.map(
        option => option.name === valueToChange ? { 
            ...option, 
            isDirty: true | false } : 
        option
    )
})

用同样的方法处理更改的支票

Should look something like, 

this.setState({ 
    ...state, 
    options: this.state.map(
        option => option.name === valueToChange ? { 
            ...option, 
            isDirty: true | false } : 
        option
    )
})