React组件重复渲染及Redux数据无法渲染卡片问题求助

一、解决Redux数据无法渲染为Card组件的问题 #

你的代码中，songs.map的回调函数没有返回JSX元素，同时缺少对songs初始空值的处理，导致页面显示空div。具体修复如下：

修复后的代码 #

import React, { useEffect } from "react";
import { useIntl } from "react-intl";
import Typography from "../../../components/Typography";
import Card from "../../../components/Card";
import CardTitle from "../../../components/CardTitle";
import { useDispatch, useSelector } from "react-redux";
import songActions from 'app/actions/song'

function List() {
    const { formatMessage } = useIntl();
    const dispatch = useDispatch();
    // 只订阅需要的state，同时处理空值避免报错
    const songs = useSelector((store) => store.song.songs || []);

    // 初始加载数据用普通useEffect，useUpdateEffect会跳过首次渲染导致请求不执行
    useEffect(() => {
        dispatch(songActions.fetchSongs());
    }, [dispatch])

    return (
        <>
            <Typography>
                {formatMessage({ id: 'title' })}
            </Typography>
            <div>
                {/* 用小括号实现箭头函数隐式返回JSX，同时添加唯一key */}
                {songs.map(item => (
                    <Card key={item.id}>
                        <CardTitle>
                            {item.id}
                        </CardTitle>
                    </Card>
                ))}
            </div>
        </>
    );
}

export default List;

关键修复点 #

1. 确保map回调返回JSX：箭头函数用小括号()包裹JSX实现隐式返回，或者在大括号内显式添加return语句。
2. 添加唯一key属性：React列表渲染必须给每个子元素设置唯一key，避免渲染警告和异常。
3. 空值安全处理：在useSelector中给songs设置默认空数组|| []，防止初始状态为undefined/null时调用map报错。
4. 恢复数据请求逻辑：把数据请求放回普通useEffect，useUpdateEffect会跳过首次渲染，导致fetchSongs从未执行，自然拿不到数据。

二、解决初始的重复渲染问题 #

你之前遇到的重复渲染，核心原因是useSelector订阅了整个store（const reduxState = useSelector((store) => store)），Redux中任何state的变化都会触发组件重新渲染。正确的优化方式是：

1. 精准订阅依赖的state：只选择组件需要的store.song.songs，而不是整个store，这样只有当songs变化时才会触发渲染。
2. 规范useEffect依赖数组：确保依赖数组完整（比如添加dispatch，Redux的dispatch是稳定值，显式添加更符合规范）。

不需要用useUpdateEffect规避重复渲染，这种方式属于治标不治本，还会引发数据请求丢失的问题。

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