React JS中基于roomCategories生成selectCategory结果异常求助

常见错误原因 #

1. 在render中更新state：render会随state/props变化多次执行，如果在render里循环调用setState追加元素，会重复触发渲染并累积相同项，最终导致数组重复。
2. 匹配条件错误：比如roomCategories里的id是小写（'jsa'/'jcv'），但roomCategoriesData的id是大写，或者筛选条件写错（比如固定匹配'jcv'），导致所有项都匹配到同一个结果。
3. 直接修改state数组：直接对this.state.selectCategory执行push等操作，不创建新数组，会导致state更新不及时，或重复累积数据。

正确解决方法 #

步骤1：在合适的时机处理筛选逻辑 #

不要在render里更新state，而是在数据初始化或变化时（比如类组件的componentDidMount/componentDidUpdate，函数组件的useEffect钩子）一次性生成目标数组。

步骤2：正确实现筛选逻辑 #

确保匹配条件准确，一次性生成完整的selectCategory数组后再更新state：

// 类组件示例（在componentDidMount或数据更新的方法中）
const { roomCategories, roomCategoriesData } = this.state;

// 遍历roomCategories，匹配对应的label
const newSelectCategory = roomCategories.map(roomId => {
  // 统一大小写避免匹配失败，若id本身大小写一致可省略toLowerCase()
  const matchedRoom = roomCategoriesData.find(item => 
    item.id.toLowerCase() === roomId.toLowerCase()
  );
  // 处理匹配不到的情况，避免出现空字符串
  return matchedRoom ? matchedRoom.label : null;
}).filter(Boolean); // 过滤空值

// 一次性更新state，避免重复追加
this.setState({ selectCategory: newSelectCategory });

步骤3：验证匹配结果 #

在代码中添加日志，确认每个roomId是否匹配到正确的项：

roomCategories.forEach(roomId => {
  const matchedRoom = roomCategoriesData.find(item => item.id === roomId);
  console.log(`roomId: ${roomId}, matchedRoom:`, matchedRoom);
});

如果某个roomId匹配结果为undefined，检查roomCategoriesData中的id是否与roomCategories的元素完全一致。

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