React组件渲染数据不显示问题排查求助

核心问题1：map回调未返回JSX元素 #

在HProject.js的Projects.map回调中，你用大括号{}包裹代码但未显式返回组件内容，导致React无法渲染任何元素。箭头函数使用大括号时必须手动写return，或者改用小括号()让它自动返回内容。

核心问题2：未定义的Res1变量与错误的数组写法 #

在Projects.js的images数组中，你使用了{Res1}但从未导入该变量，会引发引用错误；同时这里不需要用对象包裹图片变量，直接将变量放入数组即可。

修正后的Projects.js #

import Res1 from './images/Res/res1.jpg' // 补充导入Res1
import Res2 from './images/Res/res2.jpg'
import Res3 from './images/Res/res3.jpg'
import Res4 from './images/Res/res4.jpg'
import Res5 from './images/Res/res5.jpg'
import Res6 from './images/Res/res6.jpg'
import ResMain from './images/Res/ResMain.jpeg'
export const Projects = [
    {
      title: "Res",
      mainImage: ResMain,
      images: [Res1, Res2, Res3, Res4, Res5, Res6], // 移除多余的对象包裹
      id: 1
    }
];

修正后的HProject.js（自动返回写法） #

import {Projects} from "../../Projects";
const HProject = () => {
    return ( 
        <>
        {Projects.map(data => (
            <div className="col-12 col-md-4" key={data.id}>
                <div className="card" >
                    <img className="card-img-top" src={data.mainImage} alt="Card image" />
                    <div className="card-body">
                        <h4 className="card-title">{data.title}</h4>
                    </div>
                </div>
            </div>
        ))}
        </>
     );
}
 
export default HProject;

修正后的HProject.js（显式return写法） #

import {Projects} from "../../Projects";
const HProject = () => {
    return ( 
        <>
        {Projects.map(data => {
            return (
                <div className="col-12 col-md-4" key={data.id}>
                    <div className="card" >
                        <img className="card-img-top" src={data.mainImage} alt="Card image" />
                        <div className="card-body">
                            <h4 className="card-title">{data.title}</h4>
                        </div>
                    </div>
                </div>
            )
        })}
        </>
     );
}
 
export default HProject;

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