React JS中如何使用filter方法获取id与name键值对实现分类下拉

原有代码问题 #

• 数据结构不对：直接把分类名、分类id平铺push到数组里，最终得到的是类似["分类1", 101, "分类2", 102]的一维平铺数组，完全没法建立id和name的对应关系
• 选中判断逻辑有问题：拿分类名event.name判断是否已选，一旦出现同名分类就会判断错乱
• 取消选中的过滤逻辑有问题：过滤时同时排除匹配name和匹配id的项，很容易误删其他正常选中的分类

修正后完整代码 #

// check状态初始值设为空数组，最终存储格式为[[分类id, 分类名称], ...]的二维数组
const [check, setCheck] = useState([]);

const handleCheck = (event) => {
  // 字段映射：默认list_category为分类唯一id，name为分类展示名称，可根据实际接口字段调整
  const currentCategoryId = event.list_category;
  const currentCategoryName = event.name;

  // 基于唯一id判断当前分类是否已选中，避免重名导致的判断错误
  const isChecked = check.some(item => item[0] === currentCategoryId);

  if (isChecked) {
    // 取消选中：用filter方法过滤掉id匹配当前项的条目，不会误删其他分类
    const filteredList = check.filter(item => item[0] !== currentCategoryId);
    setCheck(filteredList);
  } else {
    // 选中：新增[id, name]格式的子数组，最终组成要求的二维数组结构
    const newCheckList = [...check, [currentCategoryId, currentCategoryName]];
    setCheck(newCheckList);
  }
};

/** 提交逻辑 */
const handleSubmit = (e) => {
  e.preventDefault();
  if(check.length > 0){
    // 此时check已经是id和name一一对应的二维数组，可直接传出使用
    props.setSelectedCategories(check)
    history.push('/CheckList')
  } else {
    toast.error("Select atleast one category")
    return false
  }
}

关键实现说明 #

• 存储结构统一：所有选中分类以[分类id, 分类名称]的子数组格式存储，状态更新时就完成结构组装，不需要提交阶段额外做格式转换
• 状态判断基于唯一id：从根源上避免分类重名导致的选中/取消状态错乱
• 过滤逻辑精准：取消选中时仅移除id完全匹配当前操作项的条目，不会影响其他已选分类
• 完全基于数组原生filter方法实现选中项移除逻辑，符合开发要求

如果需要对象格式的键值对结构（而非二维数组），只需要把新增条目的格式从[currentCategoryId, currentCategoryName]改为{id: currentCategoryId, name: currentCategoryName}，过滤判断逻辑同步改为item.id !== currentCategoryId即可。

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