React初学者求助：useEffect结合map实现图标条件变色出错

开发者阿泽

2026-8-16

问题分析与修正

你的代码存在几个关键错误：

错误使用useEffect：useEffect是用来处理副作用（比如数据请求、DOM操作）的钩子，它不能直接返回你需要的状态值，也不能将它的返回值赋值给变量用于渲染。
误用map方法：map是用来遍历数组生成新数组的工具，你这里只是要判断当前preload是否在收藏列表里，用some方法更合适（它会返回布尔值，判断是否有元素满足条件）。
逻辑错误：你在useEffect的map回调里返回了一个函数，这完全偏离了获取图标颜色值的需求。

修正后的代码

export const PreloadCard = ({ preload }) => {
  const { favorites } = useSelector(state => state.favorites);

  // 直接计算当前项是否在收藏列表中，返回对应的颜色值
  const favoriteIconColor = favorites.some(favorite => 
    favorite.preloadID.includes(preload.preloadID)
  ) ? "error" : "default"; // 可根据需求替换为其他颜色值，比如"primary"

  return (
    <List>
      <Card>
        <CardHeader
          action={
            <IconButton aria-label="add to favorites">
              <FavoriteIcon color={favoriteIconColor} />
            </IconButton>
          }
          titleTypographyProps={{ variant: 'h7' }}
          title={preload.name}
          subheader={preload.artist}
        />
      </Card>
    </List>
  );
};

补充说明

为什么不用useEffect？：favorites是从Redux获取的状态，当它变化时组件会自动重新渲染，所以直接在渲染阶段计算颜色值即可，不需要用useEffect监听。
some方法的作用：favorites.some(...)会遍历收藏列表，只要有一个元素的preloadID包含当前preload.preloadID，就返回true，否则返回false，我们根据这个布尔值设置图标颜色。
颜色值可选范围：Material-UI的Icon组件color属性支持"default"、"primary"、"secondary"、"error"、"info"、"success"、"warning"这些值，可根据需求调整。