ReactJS管理很多选择状态

如何解决ReactJS管理很多选择状态

鉴于我有此代码（我删除了很多选择项，因此它不是一个庞大的列表，但会多出20个左右）：

import * as React from "react";

import { Form,Card,Grid } from "tabler-react";
import { Button } from "semantic-ui-react";

class Skills extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     showSaveButton: false,showCancelButton: false,};
  }

  onChange = (event) => {
    this.setState(
      {
        showSaveButton: true,showCancelButton: true,});
  }

  cancelChanges = () => {
    this.setState(
      {
        showSaveButton: false,});
  }

  render() {
    return (
      <div className="card" name="skills">
        <Card.Body>
          <Card.Title>Top skills</Card.Title>
          <Grid.Row>
            <Grid.Col offset={1} md={10}>
              <Form.Group name="softskills" label="Soft Skills">
                <Form.SelectGroup canSelectMultiple pills onChange={this.onChange}>
                  <Form.SelectGroupItem
                    label="Communication"
                    name="communication"
                    value="Communication"
                  />
                  <Form.SelectGroupItem
                    label="Teamwork"
                    name="teamwork"
                    value="Teamwork"
                  />
             </Form.SelectGroup>
              </Form.Group>
            </Grid.Col>
          </Grid.Row>
          <Button content='Cancel changes' floated='left' color='red' basic hidden={this.state.showCancelButton ? '' : 'hidden'} onClick={this.cancelChanges}/>
          <Button content='Save changes' floated='right' color='green' basic hidden={this.state.showSaveButton ? '' : 'hidden'}/>
        </Card.Body>
 </div>
    );
  }
}

export default Skills;

当前功能是在更改时，将显示2个被取消或接受的按钮。我需要以下功能，但除非有60多个状态（每个选项的初始状态和工作状态），否则我无法解决该问题，这似乎很荒谬：

初始状态是从JSON数组中的数据库中提取的，因此该数组中出现的所有内容均应按选定状态开始（checked = true）。例如，如果数组是[“ communication”，“ timemanagement”]，则需要将Communication and Time Management选项设置为checked = true。
需要保存初始状态，以便如果发生任何更改，然后用户单击“取消”，则每个选项的选中布尔值将重置为原始状态。
如果单击接受，则需要将信息发送到数据库，因此它需要知道哪些选项已选中= 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 })

进行更改后，将特定选项标记为脏-> 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
    )
})

以同样的方式处理经检查的更改。