React页面数据渲染问题：已获数据但无法显示内容

问题现象 #

数据已通过接口成功获取（包含嵌套对象数组），控制台能正常查看完整数据，但页面无法渲染对应内容。控制台显示初始状态下数组为null，推测页面渲染时机早于数据加载完成。尝试两种组件实现方式后问题仍存在，寻求修复方案。

尝试的第一种组件实现 #

import React, {useEffect, useState} from 'react';
import "../../../index.scss"
import {useParams} from "react-router-dom";
import {OneCollection} from "../../../http/getImages.js";

const ImagePage = () => {
    const [image, setImage] = useState(null)
    const {id} = useParams()

    useEffect(() => {
        OneCollection(id).then(data => setImage(data))
    }, [])

    console.log(image, "目标数组")

    return (
        <div>
            <p>WORKING</p>
            <div>
                {image?.info?.length > 0 ? (
                    image.info.map((imageId) => (
                        <div key={imageId}>
                            {imageId.title}
                        </div>
                    ))
                ) : (
                    <div>没有图片 :(&lt;/div&gt;
                )}
            </div>
        </div>
    );
};

export default ImagePage;

尝试的第二种组件实现 #

import React, {useEffect, useState} from 'react';
import "../../../index.scss"
import {useParams} from "react-router-dom";
import {OneCollection} from "../../../http/getImages.js";

const ImagePage = () => {
    const [image, setImage] = useState({info: []})
    const {id} = useParams()
    useEffect(() => {
        OneCollection(id).then(data => setImage(data))
    }, [id, setImage, image]) // 添加image到依赖项

    console.log(image, "目标数组")
    return (
        <div>
            <p>WORKING</p>
            <div>
                {
                    image.info && image.info.length ? image.info.map(imageId =>
                        <div key={imageId}>
                            {imageId.title}
                        </div>
                    ) : <div>没有图片 :(&lt;/div&gt;
                }
            </div>
        </div>
    );
};

export default ImagePage;

修复方案 #

1. 修正useEffect依赖项 #

第一种实现中useEffect依赖数组为空，当路由参数id变化时不会重新触发请求，需将id加入依赖。同时setImage是useState返回的稳定函数，无需加入依赖：

useEffect(() => {
    OneCollection(id).then(data => setImage(data))
}, [id])

2. 确保key值唯一性 #

当前用imageId对象作为key，React无法识别唯一标识，需改用对象的唯一属性（比如imageId.id）：

<div key={imageId.id}>
    {imageId.title}
</div>

3. 优化加载状态与空值判断 #

明确处理加载中的状态，避免用户过早看到“没有图片”的提示：

return (
    <div>
        <p>WORKING</p>
        <div>
            {image === null ? (
                <div>加载中...</div>
            ) : image.info?.length > 0 ? (
                image.info.map((item) => (
                    <div key={item.id}>
                        {item.title}
                    </div>
                ))
            ) : (
                <div>没有图片 :(&lt;/div&gt;
            )}
        </div>
    </div>
);

4. 移除不必要的依赖 #

第二种实现中把image和setImage加入useEffect依赖是错误的：

• setImage无需加入依赖，它是稳定函数
• image加入依赖会导致每次数据更新都触发请求，造成无限循环

完整修复后的代码 #

import React, {useEffect, useState} from 'react';
import "../../../index.scss"
import {useParams} from "react-router-dom";
import {OneCollection} from "../../../http/getImages.js";

const ImagePage = () => {
    const [image, setImage] = useState(null);
    const {id} = useParams();

    useEffect(() => {
        // 重置状态避免旧数据残留
        setImage(null);
        OneCollection(id)
            .then(data => setImage(data))
            .catch(err => console.error('加载失败:', err)); // 增加错误处理
    }, [id]);

    return (
        <div>
            <p>WORKING</p>
            <div>
                {image === null ? (
                    <div>加载中...</div>
                ) : image.info?.length > 0 ? (
                    image.info.map((item) => (
                        <div key={item.id}>
                            {item.title}
                        </div>
                    ))
                ) : (
                    <div>没有图片 :(&lt;/div&gt;
                )}
            </div>
        </div>
    );
};

export default ImagePage;

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