React中如何从处理后的对象集合中提取ID数组并用于状态设置

嘿，我来帮你理清这个问题！你已经通过useMemo过滤出了收藏的对象集合，现在要把这些对象的ID提取成数组用来设置selectedRowKeys状态，其实很简单，用数组的map方法就能搞定，我给你一步步拆解：

1. 从过滤后的对象集合中提取ID数组 #

你已经得到了initialState（过滤后的收藏对象数组），只需要遍历这个数组，把每个对象的id属性取出来就行。配合useMemo缓存结果，还能避免不必要的重复计算：

const favoriteIds = useMemo(() => {
  // 遍历initialState，提取每个对象的id
  return initialState.map(item => item.id);
}, [initialState]); // 只有initialState变化时才重新计算

2. 用ID数组初始化状态 #

现在你可以直接把favoriteIds作为selectedRowKeys的初始值，完全符合你想要的数组格式：

const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(favoriteIds);

3. 动态同步状态（可选） #

如果initialState会随着favorites或dataTable动态变化（比如用户添加/取消收藏），可以用useEffect同步更新selectedRowKeys，确保选中的ID始终和收藏列表保持一致：

useEffect(() => {
  // 每次initialState变化时，重新生成ID数组并更新状态
  const newSelectedKeys = initialState.map(item => item.id);
  setSelectedRowKeys(newSelectedKeys);
}, [initialState]);

完整代码示例 #

把这些逻辑整合到组件里，注意修正useMemo的依赖数组（你原来写的[results, favorites]不对，应该是[dataTable, favorites]，因为过滤的是dataTable）：

import { useState, useMemo, useEffect } from 'react';

const YourComponent = () => {
  // 假设dataTable、favorites是组件中已有的变量
  const initialState = useMemo(() => {
    return dataTable.filter(result => favorites.some(favorite => result.id === favorite.id));
  }, [dataTable, favorites]); // 修正依赖数组

  const favoriteIds = useMemo(() => {
    return initialState.map(item => item.id);
  }, [initialState]);

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(favoriteIds);

  // 同步更新选中状态
  useEffect(() => {
    setSelectedRowKeys(initialState.map(item => item.id));
  }, [initialState]);

  // 其他业务逻辑...

  return (
    // 你的组件JSX内容
  );
};

export default YourComponent;

小提醒 #

• 确保initialState里的每个对象都有id属性，避免出现undefined的情况；
• 依赖数组一定要写对，不然会导致状态不更新或者重复渲染的问题。

备注：内容来源于stack exchange，提问作者Margarita Logatskaya