React组件数据在Console显示但未渲染的问题排查与修复

我有一个Product.js组件，用于从后端获取数据，并尝试利用获取到的数据渲染JSX内容。但服务器返回数据后，组件仅返回外层div，却不显示数据对应的内容。以下是我的代码：

import React , {useState, useEffect} from 'react';
import { useParams } from 'react-router-dom';
import "./popup.css"

function Product(){

    const [user, setUser] = useState();

    const params = useParams()
    console.log(params);

    async function getUser(id) {
        const response = await fetch(`http://localhost:8000/cats/${id}`)
        const data = await response.json();
        console.log(data);
        setUser(params.id);
    }


    useEffect (() => {
        getUser(params.id);
    },[params.id])

    document.body.style ='#bacdd8';


    if(user){
        return(
            <div className='container'>
                 <div className='images'>
                     <img src={user.image_url} alt={user.name} />
                 </div>
                 <div className='cat'>
                     <h1>{user.name}</h1>
                     <p className='desc'>{user.description}</p>
                 </div>
            </div>
         )
        }else{
            <p>Still Loading...</p>
        }
    
}

export default Product;

我尝试通过if判断等待user状态有值后再渲染JSX，但似乎未能及时生效，仅能在控制台看到数据已加载。我认为是JSX在数据加载完成前就已渲染，请问该如何修复？

你的问题核心是两个直接错误导致数据无法正常渲染：

1. 状态更新错误 #

在getUser函数里，你错误地把params.id赋值给了user状态，但后续渲染时你把user当成对象去访问image_url、name等属性——这完全不匹配。正确做法是把接口返回的data赋值给状态：

async function getUser(id) {
    const response = await fetch(`http://localhost:8000/cats/${id}`)
    const data = await response.json();
    setUser(data); // 将获取到的完整数据对象存入状态
}

2. else分支缺少return语句 #

你的else分支只写了加载状态的JSX，但没有用return返回它，导致组件在加载阶段没有输出任何内容，React会忽略这个分支的代码。修正后：

else{
    return <p>Still Loading...</p>
}

额外优化点 #

• 不要直接在组件函数体里修改document.body.style，放到useEffect里可以避免每次渲染都执行，还能在组件卸载时恢复原有样式：

useEffect(() => {
    document.body.style.backgroundColor = '#bacdd8';
    return () => {
        document.body.style.backgroundColor = '';
    }
}, []);

• 初始状态设为null，语义更清晰：const [user, setUser] = useState(null);

完整修正代码 #

import React , {useState, useEffect} from 'react';
import { useParams } from 'react-router-dom';
import "./popup.css"

function Product(){
    const [user, setUser] = useState(null);
    const params = useParams()

    async function getUser(id) {
        const response = await fetch(`http://localhost:8000/cats/${id}`)
        const data = await response.json();
        setUser(data);
    }

    useEffect(() => {
        getUser(params.id);
        // 处理body背景色
        document.body.style.backgroundColor = '#bacdd8';
        // 组件卸载时恢复样式
        return () => {
            document.body.style.backgroundColor = '';
        }
    },[params.id])

    if(user){
        return(
            <div className='container'>
                 <div className='images'>
                     <img src={user.image_url} alt={user.name} />
                 </div>
                 <div className='cat'>
                     <h1>{user.name}</h1>
                     <p className='desc'>{user.description}</p>
                 </div>
            </div>
         )
    }else{
        return <p>Still Loading...</p>
    }
}

export default Product;

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