如何使用React Redux动态渲染图标，解决刷新后收藏红心不显示问题

问题解答 #

1. 关于多useState定义的问题 #

可以正常定义多个useState，这是React Hook的标准用法，没有数量限制，只要符合Hook调用规则（仅在组件顶层调用、仅在React函数组件/自定义Hook中调用）即可，你现有代码中的多useState写法完全合法。

2. 刷新后红心图标恢复空心的解决方案 #

你遇到的样式重置问题是因为当前图标状态仅存储在组件内部的useState中，页面刷新后组件本地状态会被重置为初始值。你已经接入redux-persist保证刷新后store内收藏数据不丢失，直接按以下逻辑调整即可：

• 优先以store中存储的收藏数据作为图标渲染的唯一依据，不需要额外在组件内维护独立的收藏状态，避免本地状态和store数据不同步的问题
• 具体实现步骤：
  • 组件内通过useSelector从store中拉取收藏列表数据，示例代码（替换为你项目的实际store取值路径）：

    const favoriteTrackList = useSelector(state => state.playlist.favoriteTracks)
    const currentTrackId = '当前渲染曲目的唯一ID'
    

  • 渲染图标时直接判断当前曲目ID是否在收藏列表中，动态返回对应图标：

    {favoriteTrackList.includes(currentTrackId) ? <SolidHeartIcon /> : <EmptyHeartIcon />}
    

  • 点击切换收藏的逻辑直接dispatch对应action修改store中的收藏列表即可，状态更新后图标会自动同步渲染。
• 如果你确实需要在组件内用useState单独存储当前曲目的收藏状态，补充一个useEffect同步store数据即可：

  const [isLiked, setIsLiked] = useState(false)
  const favoriteTrackList = useSelector(state => state.playlist.favoriteTracks)
  const currentTrackId = '当前渲染曲目的唯一ID'
  
  // 组件挂载、收藏列表/当前曲目变化时，同步更新本地状态
  useEffect(() => {
    setIsLiked(favoriteTrackList.includes(currentTrackId))
  }, [favoriteTrackList, currentTrackId])
  

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