React中多复选框状态管理：解决选中关联相同项目的类别时项目ID重复问题

首先，我注意到你的代码里有几个基础问题需要先修正，然后再处理重复ID的核心问题：

一、修正代码中的基础错误 #

1. 复选框name属性错误：你的checkboxes数组里没有name字段，应该用category作为复选框的name（对应显示的类别文本），否则复选框的选中状态无法正确绑定。
2. React列表key错误：map渲染列表时，key应该使用item.id（数组里唯一的标识），而不是不存在的item.key，这会避免React的列表渲染警告。
3. 选中状态默认值：当复选框未被选中时，this.state.checkedItems.get(item.category)会返回undefined，需要给checked属性加个默认的false。

修正后的渲染部分代码：

{checkboxes.map((item) => (
  <label key={item.id} className="m-3">
    <Checkbox 
      name={item.category} 
      checked={this.state.checkedItems.get(item.category) || false} 
      onChange={this.handleChange} 
    />
    {item.category}
  </label>
))}

二、解决重复项目ID的核心问题 #

你当前的状态只是记录每个类别是否被选中，但最终需要的是所有选中类别下的不重复项目ID集合。我们可以通过两种方式实现：

方式1：动态计算去重（适合按需获取的场景） #

如果不需要把去重后的ID存在状态里，而是在需要的时候（比如提交表单）计算，可以添加一个专门的方法来获取唯一ID：

getUniqueProjectIds() {
  // 先筛选出所有被选中的类别
  const selectedCategories = [...this.state.checkedItems.entries()]
    .filter(([category, isChecked]) => isChecked)
    .map(([category]) => category);

  // 收集所有选中类别的项目ID，再用Set去重
  const allProjectIds = checkboxes
    .filter(item => selectedCategories.includes(item.category))
    .flatMap(item => item.projects.map(p => p.id));

  return [...new Set(allProjectIds)];
}

你可以在需要的地方调用这个方法，比如在状态更新后打印测试：

handleChange(e) {
  const item = e.target.name;
  const isChecked = e.target.checked;
  this.setState((prevState) => ({
    checkedItems: prevState.checkedItems.set(item, isChecked),
  }), () => {
    // 状态更新完成后打印去重后的ID
    console.log("唯一项目ID：", this.getUniqueProjectIds());
  });
}

方式2：将去重后的ID存入状态（适合实时使用的场景） #

如果你希望把去重后的ID实时存在状态里，可以修改handleChange方法，每次更新选中状态时同步计算并更新唯一ID：

constructor(props) {
  super(props);
  this.state = {
    checkedItems: new Map(),
    uniqueProjectIds: [] // 新增状态存储去重后的项目ID
  };
  this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
  const item = e.target.name;
  const isChecked = e.target.checked;
  
  this.setState((prevState) => {
    // 复制并更新选中状态
    const newCheckedItems = new Map(prevState.checkedItems);
    newCheckedItems.set(item, isChecked);
    
    // 计算唯一项目ID
    const selectedCategories = [...newCheckedItems.entries()]
      .filter(([cat, checked]) => checked)
      .map(([cat]) => cat);
    
    const allProjectIds = checkboxes
      .filter(catItem => selectedCategories.includes(catItem.category))
      .flatMap(catItem => catItem.projects.map(p => p.id));
    
    const uniqueIds = [...new Set(allProjectIds)];
    
    return {
      checkedItems: newCheckedItems,
      uniqueProjectIds: uniqueIds
    };
  }, () => {
    console.log("状态中的唯一项目ID：", this.state.uniqueProjectIds);
  });
}

三、完整修正后的代码 #

这里给出包含所有修复和方式2实现的完整代码：

import React from "react";
const Checkbox = ({ type = "checkbox", name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);
const checkboxes = [
  { id: "31", category: "english", projects: [{ id: "9" },],},
  { id: "32", category: "maths", projects: [{ id: "2" },],},
  { id: "33", category: "marketing", projects: [{ id: "2" },],},
  { id: "34", category: "physics", projects: [{ id: "2" },],},
  { id: "35", category: "media", projects: [{ id: "2" },{ id: "10" },],},
  { id: "36", category: "science", projects: [{ id: "9" },{ id: "11" },],},
];
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: new Map(),
      uniqueProjectIds: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    
    this.setState((prevState) => {
      const newCheckedItems = new Map(prevState.checkedItems);
      newCheckedItems.set(item, isChecked);
      
      const selectedCategories = [...newCheckedItems.entries()]
        .filter(([cat, checked]) => checked)
        .map(([cat]) => cat);
      
      const allProjectIds = checkboxes
        .filter(catItem => selectedCategories.includes(catItem.category))
        .flatMap(catItem => catItem.projects.map(p => p.id));
      
      const uniqueIds = [...new Set(allProjectIds)];
      
      return {
        checkedItems: newCheckedItems,
        uniqueProjectIds: uniqueIds
      };
    }, () => {
      console.log("当前选中的唯一项目ID：", this.state.uniqueProjectIds);
    });
  }

  render() {
    return (
      <div className="row float-center d-flex justify-content-center">
        {checkboxes.map((item) => (
          <label key={item.id} className="m-3">
            <Checkbox 
              name={item.category} 
              checked={this.state.checkedItems.get(item.category) || false} 
              onChange={this.handleChange} 
            />
            {item.category}
          </label>
        ))}
      </div>
    );
  }
}

这样处理后，无论你选中多少个包含重复项目ID的类别，最终得到的项目ID都是唯一的，不会出现重复项。

内容的提问来源于stack exchange，提问作者Sam