数据未显示在主页上 - ReactJS

Question

我正在创建一个 reactjs 应用程序，其中有一个要迭代的地图列表，并在主页上显示这些数据。我已经为所有文件创建了功能组件，提取并导入了需要的组件。但是即使我已经将数据导入主页文件，数据也没有显示在主页上。

我试过这样做，但没有用，也没有在控制台中显示任何错误。

以下是显示我的尝试的代码摘录。

CardData代码如下：

const CardData = [
  {
    id: 1,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
  {
    id: 2,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
  {
    id: 3,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
  {
    id: 4,
    img: 'https://images.pexels.com/photos/1758845/pexels-photo-1758845.jpeg?auto=compress&cs=tinysrgb&crop=faces&fit=crop&h=200&w=200',
    title: 'Web Design',
    desc: 'Lorem ipsum dolor sit amet, conse adipiscing elit. Phasellus enim erat, vestibulum vel.',
  },
]

export default CardData

卡片容器代码如下：

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

const CardContainer = () => {
  const navigate = useNavigate()
  return (
    // map over the CardData array and return a div for each item
    <div className='card'>
      {CardData.map((item) => {
        <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>
      })}
    </div>
  )

}
    
export default CardContainer;

主页文件代码如下：

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'>

          <CardContainer />

          <CardContainer />

          <CardContainer />
      
        </div>
      </div>
    </section>
    <Outlet />
  </>
)

export default Home

Answer 1

你错过了使用 map 函数的 return 语句， 它应该是这样的：

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

const CardContainer = () => {
  const navigate = useNavigate()
  return (
    // map over the CardData array and return a div for each item
    <div className='card'>
      {CardData.map((item) => {
        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>)
      })}
    </div>
  )

}
    
export default CardContainer;