ReactJS应用首页数据不显示问题求助

核心问题诊断 #

你的代码存在两个关键问题，导致数据无法正常渲染：

1. CardContainer中map回调未返回JSX元素
   你在CardData.map()里用大括号{}包裹了JSX内容，但既没有显式写return语句，也没有用小括号()实现隐式返回。这会让map返回一个全是undefined的数组，React没有可渲染的内容，且这种情况属于语法合法但逻辑错误，所以控制台不会抛出报错。

2. Home组件重复渲染CardContainer
   当前Home里连续渲染了三次<CardContainer />，每个CardContainer都会遍历所有4条数据，最终会重复显示12个卡片；同时你的Grid布局是给这些CardContainer的父元素，每个CardContainer作为单独div会破坏布局结构，不符合预期的列表展示逻辑。

另外，React列表渲染必须给每个子元素添加唯一的key属性，否则会触发性能警告，这也是需要补充的细节。

修复方案 #

方案一：修复CardContainer的map逻辑并调整Home的渲染方式

修改CardContainer，确保map返回JSX元素并添加key：

import CardData from '../home/CardData'
import { useNavigate } from 'react-router-dom'

const CardContainer = () => {
  const navigate = useNavigate()
  return (
    <div className='card'>
      {/* 用小括号实现隐式返回，同时添加唯一key属性 */}
      {CardData.map((item) => (
        <div key={item.id} className='p-5 flex flex-col'>
          <div className='rounded-xl overflow-hidden'>
            <img
              src={item.img}
              alt={item.title}
              className='w-full h-40 sm:h-48 object-cover'
            />
          </div>
          <div className='py-5 px-6 sm:px-8'>
            <h2 className='text-xl sm:text-2xl text-gray-800 font-semibold mb-3'>
              {item.title}
            </h2>
            <p className='text-gray-500 leading-relaxed'>{item.desc}</p>
            <button className='button' onClick={() => navigate('/')}>
              View Details
            </button>
          </div>
        </div>
      ))}
    </div>
  )
}
    
export default CardContainer;

然后修改Home，只渲染一次CardContainer，并给Grid容器添加间距优化布局：

import { Outlet } from 'react-router-dom'
import Navbar from '../../components/Navbar/Navbar'
import CardContainer from '../home/CardContainer'

const Home = () => (
  <>
    <Navbar />
    <section>
      <div className='flex items-center justify-center min-h-screen container mx-auto'>
        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
          <CardContainer />
        </div>
      </div>
    </section>
    <Outlet />
  </>
)

export default Home

方案二：拆分单个卡片组件（更符合React组件拆分原则）

创建单独的Card组件负责渲染单条数据：

// Card.jsx
import { useNavigate } from 'react-router-dom'

const Card = ({ item }) => {
  const navigate = useNavigate()
  return (
    <div className='p-5 flex flex-col'>
      <div className='rounded-xl overflow-hidden'>
        <img
          src={item.img}
          alt={item.title}
          className='w-full h-40 sm:h-48 object-cover'
        />
      </div>
      <div className='py-5 px-6 sm:px-8'>
        <h2 className='text-xl sm:text-2xl text-gray-800 font-semibold mb-3'>
          {item.title}
        </h2>
        <p className='text-gray-500 leading-relaxed'>{item.desc}</p>
        <button className='button' onClick={() => navigate('/')}>
          View Details
        </button>
      </div>
    </div>
  )
}

export default Card

然后在Home中直接遍历数据渲染Card组件：

import { Outlet } from 'react-router-dom'
import Navbar from '../../components/Navbar/Navbar'
import Card from '../home/Card'
import CardData from '../home/CardData'

const Home = () => (
  <>
    <Navbar />
    <section>
      <div className='flex items-center justify-center min-h-screen container mx-auto'>
        <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
          {CardData.map(item => (
            <Card key={item.id} item={item} />
          ))}
        </div>
      </div>
    </section>
    <Outlet />
  </>
)

export default Home

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