复选框设置状态，并在 React 中重置

Question

我正在 React 中开发一个复选框组件，该组件是通过从 API 获取组数据然后为每个组创建一个复选框而创建的。 当您单击一个复选框时，我已经设置了代码以将该特定组的 ID 输入到要与表单一起提交的数组中的状态。 我的问题有两部分。 当我单击复选框并取消单击它时，它会将 ID 输入两次状态，而不是删除 ID。 我怎样才能解决这个问题？？ 此外，当我提交它所附的表单时，我希望复选框重置并基本上取消单击并将状态重置为空。 我怎样才能做到这一点？

这是我的代码：

import React, { useState, useEffect, useContext } from "react";
import { LoggedInContext } from "./contexts/LoggedIn";
import styles from "./styles/GroupCheckboxStyles";
import { withStyles } from "@material-ui/core";

function GroupCheckbox(props) {
  const [groups, setGroups] = useState([]);
  const [loading, setLoading] = useState(true);
  const { token } = useContext(LoggedInContext);
  const { classes } = props;

  useEffect(() => {
    fetch(process.env.REACT_APP_SERVER + "groups", {
      headers: {
        "Content-Type": "application/json",
        Token: token
      }
    })
      .then(res => res.json())
      .then(data => {
        setGroups(data.data);
        setLoading(false);
      });
  }, [token]);

  return (
    <div className={classes.root} style={{ margin: `${props.margin}` }}>
      <div className={classes.group_header}>Groups</div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        groups.map(x => {
          return (
            <div className={classes.specific_group} key={x._id}>
              <input
                type="checkbox"
                id={x._id}
                name={x.name}
                onChange={props.handleGroupCheckboxClick}
              />
              <label htmlFor={x.name}>{x.name}</label>
            </div>
          );
        })
      )}
    </div>
  );
}

export default withStyles(styles)(GroupCheckbox);

这是从父组件传递给它的：

const handleGroupCheckboxClick = event => {
    let checkId = event.target.id;
    setSelectedGroups([...selectedGroups, checkId]);
    console.log(selectedGroups);
  };

<GroupCheckbox
          className={classes.checkbox}
          handleGroupCheckboxClick={handleGroupCheckboxClick}
          margin={"0 auto"}
        />

这是复选框组件的图像，其中包含多次单击后的状态日志：

Answer 1

使用对象更容易。

将useState从数组更改为对象

...
const [selectedGroups, setSelectedGroups] = useState({});
...

更新处理程序

...
const handleGroupCheckboxClick = ({ target: { id }})=> {
    setSelectedGroups((s) => ({ ...s, [id]: !s[id] }));
  };
...

然后你可以在提交时过滤所有真实的键。

const keys = Object.keys(selectedGroups);
const arrayOfIds = [];
for(let i = 0; i<keys.length; i++) {
  const id = keys[i];
  if(selectedGroups[id]) arrayOfIds.push(id);
}
console.log({ arrayOfIds });

您还可以将对象连接到复选框。 当用空对象更新对象时，所有复选框都将被重置。