React中props结合map函数无法渲染内容问题排查

我正在测试功能，尝试通过props将names数组中的projectname和emoji渲染到页面，已查阅教程但内容无法显示。以下是我的Projects组件代码，App.js已能正常显示测试文本，希望解决该渲染问题。

Projects组件代码 #

import React from 'react'
const names =[
    {
        projectname: "Project 1",
        emoji: "happy",
    },
    {
        projectname: "Project 2",
        emoji: "sad",
    },
    {
        projectname: "Project 3",
        emoji: "angry",
    },
    {
        projectname: "Project 4",
        emoji: "confused",
    },
    {
        projectname: "Project 5",
        emoji: "wink",
    },
    {
        projectname: "Project 6",
        emoji: "smile",
    }
]

function cards(props){
    <>
    <h1>{props.projectname}</h1>
    <h2>{props.emoji}</h2>
    </>
}

function Projects(){
    return(
        <>
        <div className="projectsAll">
            <h1> This is a test</h1>
            {names.map((cards) => (
                <cards
                projectname={cards.projectname}
                emoji={cards.emoji}
                />
            ))
        }
        </div>
        </>
    )
}


export default Projects

App.js代码 #

import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './pages/Header';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Homepage from './pages/Homepage';
import Contact from './pages/Contact';
import About from './pages/AboutMe';
import Projects from './pages/Projects';


function App() {
  return (
    <Router>
         <Header /> 
         <Routes>
          <Route path="/" element={<Homepage />} />
          <Route path="/aboutme" element={<About />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/contactme" element={<Contact />} />
         </Routes>
    </Router>
    
  )
}

export default App;

你的代码存在三个关键问题导致内容无法渲染：

• 组件名称必须大写开头：React规定自定义组件名称首字母必须大写，小写开头的会被识别为原生HTML标签，因此cards要改为Cards。
• 组件缺少return语句：cards组件内的JSX没有通过return返回，React无法获取要渲染的内容。
• map渲染需添加key属性：使用数组map渲染列表时，每个子元素必须有唯一的key属性，帮助React追踪元素变化。

修正后的Projects组件代码：

import React from 'react'
const names =[
    {
        projectname: "Project 1",
        emoji: "happy",
    },
    {
        projectname: "Project 2",
        emoji: "sad",
    },
    {
        projectname: "Project 3",
        emoji: "angry",
    },
    {
        projectname: "Project 4",
        emoji: "confused",
    },
    {
        projectname: "Project 5",
        emoji: "wink",
    },
    {
        projectname: "Project 6",
        emoji: "smile",
    }
]

// 组件名改为大写Cards，并添加return返回JSX
function Cards(props){
    return (
        <>
            <h1>{props.projectname}</h1>
            <h2>{props.emoji}</h2>
        </>
    )
}

function Projects(){
    return(
        <>
            <div className="projectsAll">
                <h1> This is a test</h1>
                {names.map((cardItem) => (
                    // 组件名改为Cards，添加唯一key属性
                    <Cards
                        key={cardItem.projectname}
                        projectname={cardItem.projectname}
                        emoji={cardItem.emoji}
                    />
                ))}
            </div>
        </>
    )
}

export default Projects

替换原Projects组件代码后，即可正常渲染每个项目的projectname和emoji。

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