刷新页面后无法将Express的API响应数据传递到React的问题求助

• 第一是异步请求时序问题：useEffect 会在组件首次渲染完成后才执行，刷新页面后首次渲染时，axios 请求还未返回，此时你初始化的 content 是空数组 []，直接将空数组传递给子组件后，子组件尝试读取 props.content.heading 时，数组本身没有 heading 属性，就会返回 undefined 甚至抛出错误。首次运行正常大概率是开发环境热更新缓存了之前的请求结果，或者本地接口响应速度极快刚好赶在渲染前完成了数据写入。
• 第二是数组未遍历的逻辑问题：后端返回的 /api/contents 接口数据是包含3篇文章对象的数组，你没有对数组做遍历就直接传给了单卡片组件 TheLatestArticleCard，该组件设计上是接收单个文章对象作为props，传入整个数组自然无法读取到单个对象的属性。
• 另外注意检查组件引入名称是否匹配：主组件中使用的标签是 <TheLatestArticle />，但子组件定义的名称是 TheLatestArticleCard，拼写不一致也可能导致异常。

1. 修改主页面组件MainHomePage #

添加加载状态判断，遍历文章数组渲染对应数量的卡片组件：

import axios from 'axios';
import {useState,useEffect} from 'react'
// 注意引入路径和组件名称要和实际文件对应
import TheLatestArticleCard from './TheLatestArticleCard'

function MainHomePage(){
    const [content,setContent] = useState([]);
    const [loading,setLoading] = useState(true);
    const [error,setError] = useState(null);

    useEffect(()=>{
        const fetchPosts = async ()=>{
            try {
                const res = await axios.get("/api/contents")
                setContent(res.data)
            } catch (err) {
                setError(err.message)
            } finally {
                setLoading(false)
            }
        }
        fetchPosts()
    },[])

    // 加载中/加载失败时显示对应占位，避免渲染子组件时报错
    if(loading) return <div>加载中...</div>
    if(error) return <div>加载失败：{error}</div>

    return (
        <>
            {/* 遍历数组渲染卡片，必须传入唯一key值 */}
            {content.map(item => (
                <TheLatestArticleCard key={item.id} content={item} />
            ))}
        </>
    );
}

export default MainHomePage;

2. 可选优化子组件TheLatestArticleCard #

添加属性默认值和可选链判断，极端场景下也不会抛出报错：

import cardImage from "./../../Images/card.jpg"
import './TheLatestArticleCard.css';

// 解构props时给content设置默认空对象
const TheLatestArticleCard = ({ content = {} }) => {
    return(
        <div className="card">
            <div className="image">
                <img src={cardImage} alt="cardimg"/>
            </div>
            <div className="content">
                {/* 可选链+默认值兜底，避免属性读取报错 */}
                <p className="heading">{content?.heading || ''}</p>
                <p className="body-content">{content?.content || ''}</p>
                <div className="details">
                    <p className="details-info">Travel <span className="details-info-2">/ August 21 2017</span></p>
                </div>
            </div>
        </div>
    )
}
export default TheLatestArticleCard;

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