在useEffect中使用MUI Transfer List实现数组过滤的问题

在React Hook Form项目中使用MUI Transfer List时，数据可正常保存至数据库，但从API取回数据后，无法正确过滤左侧列表（预期显示未被选中的选项）。

模拟API数据 #

export const API_Attachment_Types = [
  { id: "101", name: "PERMIT", description: "Permit"},
  { id: "102", name: "JHA", description: "Job Hazard Analysis"},
  { id: "103", name: "ALC", description: "Access Limitation Certificate"},
  { id: "104", name: "BUC", description: "Box up Certificate"},
  { id: "105", name: "DCONC", description: "De-contamination Certificate"},
  { id: "106", name: "EIC", description: "Electrical Isolation Certificate"},
];

原代码问题分析 #

原代码中filterArray函数逻辑错误：API_Attachment_right是对象数组，includes(item.id)无法匹配到对象数组中的元素（includes会严格比对整个对象，而非对象的id字段），导致过滤结果不符合预期。

原代码片段：

let API_Attachment_right = state.data.packDetail.attachementDetail
  ? state.data.packDetail.attachementDetail
  : [];

let API_Attachment_left = API_Attachment_Types;

const filterArray = () => {
    return API_Attachment_left.filter((item) =>
      API_Attachment_right.includes(item.id) // 此处逻辑错误，无法正确匹配
    );
};

useEffect(() => {
    setLeft(filterArray()); // 无法完成正确过滤
    setRight(API_Attachment_right);
}, []);

解决方案 #

1. 修正过滤逻辑 #

先提取已选数据的id集合，再过滤出不在集合中的项（左侧列表需显示未被选中的选项）：

let API_Attachment_right = state.data.packDetail.attachementDetail
  ? state.data.packDetail.attachementDetail
  : [];

let API_Attachment_left = API_Attachment_Types;

const filterArray = () => {
  // 提取已选数据的id到Set，提升查找效率
  const selectedIds = new Set(API_Attachment_right.map(item => item.id));
  // 过滤出未被选中的项，作为左侧列表数据
  return API_Attachment_left.filter(item => !selectedIds.has(item.id));
};

2. 完善useEffect依赖项 #

添加API_Attachment_right作为依赖，确保当取回的数据更新时，自动重新过滤列表：

useEffect(() => {
  setLeft(filterArray());
  setRight(API_Attachment_right);
}, [API_Attachment_right]); // 依赖项更新时触发重新计算

关键说明 #

• 使用Set存储已选id是因为Set.has()的查找效率远高于数组includes()，尤其当数据量较大时更明显。
• 过滤逻辑中使用!selectedIds.has(item.id)，确保左侧列表只显示未被右侧选中的选项，符合预期需求。

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