React+TypeScript+MUI分页卡片收藏异常：单卡片选中问题求助

问题根源 #

当前用数组下标作为卡片的唯一标识（id）维护收藏状态，但分页场景下，不同页面里处于相同位置的卡片会共享同一个下标，导致切换收藏时所有同位置卡片的状态同步变化。

解决方案 #

1. 改用卡片自身的唯一ID作为标识

渲染卡片时，传递数据中每个卡片自带的唯一id（而非数组循环的下标）给收藏切换函数，确保每个卡片的状态绑定到自身唯一标识。

2. 调整收藏状态的存储结构

将原数组类型的iconFavorite改为对象结构，用卡片ID作为键，布尔值作为收藏状态值，彻底摆脱位置依赖。

修改后的代码示例 #

初始化收藏状态

// 初始化为空对象，或根据现有数据批量初始化所有卡片为未收藏
const [iconFavorite, setIconFavorite] = useState<Record<number, boolean>>({});

// 若需默认所有卡片未收藏，可使用以下初始化方式：
// const [iconFavorite, setIconFavorite] = useState<Record<number, boolean>>(
//   data.reduce((acc, item) => ({ ...acc, [item.id]: false }), {})
// );

收藏状态切换函数

const changeColorFavorite = (cardId: number) => {
  setIconFavorite(prevState => ({
    ...prevState,
    [cardId]: !prevState[cardId] // 未记录的卡片默认状态为false，取反后变为true
  }));
};

收藏按钮渲染代码

<Button size="small">
  <FavoriteIcon
    onClick={() => changeColorFavorite(item.id)} // 传入卡片自身的唯一ID
    style={{ color: iconFavorite[item.id] ? "red" : "gray" }}
  />
</Button>

效果说明 #

修改后，每个卡片的收藏状态与自身唯一ID绑定，无论卡片处于哪个分页位置，点击收藏只会改变当前卡片的状态，不会影响其他页面同位置的卡片。

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