React遍历JSON文件时Props传递失效问题排查求助

尝试用React Bootstrap卡片展示自定义JSON文件中的项目信息，但即使去掉样式也无法正常显示，附上相关代码寻求解决方法。

提供的代码 #

JSON文件（projects.json） #

[
    {
        "id" : 1,
        "projectname": "Having fun",
        "description": "Having fun that is the project",
        "image":"../assets/images/havingfun.png"
    },
    {
        "id" : 2,
        "projectname": "Weather App",
        "description": "Weather app that is the project",
        "image":"../assets/images/weather.png" 
    }, 
    {
        "id" : 3,
        "projectname": "Daily Planner",
        "description": "Daily planner is the project",
        "image": "../assets/images/planner.png"
      
    }, 
    {
        "id" : 4,
        "projectname": "Code Quiz",
        "description": "Multiple Choice Quiz is the project",
        "image": "../assets/images/MCQ.png"
            
    }, 
    {
        "id" : 5,
        "projectname": "Password Generator",
        "description": "Password generator that is the project",
        "image": "../assets/images/passwordgenerator.png" 
      
    },
    {
        "id" : 6,
        "projectname": "Horiseon",
        "description": "Horiseon that is the project",
        "image": "../assets/images/horiseon.png" 
        
    }
]

Projects.js #

import React from 'react'
import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import ProjectCards from '../jsonfiles/projects.json';


function ProjectCard(props) {
    <Card style={{ width: '18rem' }}>3
        <Card.Img variant="top" alt={props.projectname} src={props.image} />
        <Card.Body>
            <Card.Title>{props.projectname}</Card.Title>
            <Card.Text>{props.description}</Card.Text>
            <button className="deployedURL">Deployed Site{props.deployedURL}</button>
            <button className="githubURL">Github{props.githubUrl}</button>
        </Card.Body>
    </Card>
}

function Projects() {
    return (
        <div className="projectsAll">
            <div className="projectsTitle">
                <h1>Projects</h1>
                <p>Here are a few of the projects that have been create based on the client's requirements and design ideas</p>
            </div>
            <Row xs={1} md={2} className="g-4">
                {Array.from({ length: 6 }).map((_, idx) => (
                    <Col>
                        <Card>
                            <Card.Body>
                                <Row>
                                    <Col sm={6} className='softwareUsed'>
                                        <h1>HTML</h1>
                                        <p></p>
                                        <hr></hr>
                                        <h1>CSS</h1>
                                        <p></p>
                                        <hr></hr>
                                        <h1>JavaScript</h1>
                                        <p></p>
                                        <hr></hr>
                                    </Col>
                                    <Col sm={6} className='projectMiniCard'>
                                        {ProjectCards.map((project)=>(
                                            <ProjectCard
                                            projectname={project.projectname}
                                            image={project.image}
                                            description={project.description}
                                            />
                                        ))}
                                    </Col>
                                </Row>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div >
    )
}

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;

问题分析与修复方案 #

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

1. ProjectCard组件未返回JSX #

函数组件必须通过return返回要渲染的JSX内容，原ProjectCard组件缺少return语句，同时还存在多余的"3"字符，导致组件无法输出任何内容。

修复后的ProjectCard组件：

function ProjectCard(props) {
    return (
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" alt={props.projectname} src={props.image} />
            <Card.Body>
                <Card.Title>{props.projectname}</Card.Title>
                <Card.Text>{props.description}</Card.Text>
                <button className="deployedURL">Deployed Site</button>
                <button className="githubURL">Github</button>
            </Card.Body>
        </Card>
    )
}

注：原JSON中没有deployedURL和githubUrl字段，暂时去掉变量引用，后续可补充到JSON文件中。

2. 重复渲染逻辑错误 #

原代码用Array.from({ length: 6 }).map()生成6个容器，每个容器又遍历渲染所有6个项目，最终会生成36个重复卡片。正确逻辑应该直接遍历ProjectCards生成对应容器。

修复后的核心渲染部分：

<Row xs={1} md={2} className="g-4">
    {ProjectCards.map((project) => (
        <Col key={project.id}>
            <Card>
                <Card.Body>
                    <Row>
                        <Col sm={6} className='softwareUsed'>
                            <h1>HTML</h1>
                            <hr />
                            <h1>CSS</h1>
                            <hr />
                            <h1>JavaScript</h1>
                            <hr />
                        </Col>
                        <Col sm={6} className='projectMiniCard'>
                            <ProjectCard
                                projectname={project.projectname}
                                image={project.image}
                                description={project.description}
                            />
                        </Col>
                    </Row>
                </Card.Body>
            </Card>
        </Col>
    ))}
</Row>

注：React列表渲染必须添加唯一key属性，这里用项目id作为key符合要求。

3. 图片路径问题 #

React中src目录下的静态资源无法直接通过相对路径加载，有两种解决方式：

• 方案一：将图片移到项目根目录的public/assets/images下，修改JSON中的路径为/assets/images/havingfun.png
• 方案二：在组件中导入图片，修改ProjectCard的图片引用为导入的变量

4. 组件未导出 #

原Projects组件没有导出语句，需要在文件末尾添加：

export default Projects;

最终修复后的完整Projects.js #

import React from 'react'
import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import ProjectCards from '../jsonfiles/projects.json';

function ProjectCard(props) {
    return (
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" alt={props.projectname} src={props.image} />
            <Card.Body>
                <Card.Title>{props.projectname}</Card.Title>
                <Card.Text>{props.description}</Card.Text>
                <button className="deployedURL">Deployed Site</button>
                <button className="githubURL">Github</button>
            </Card.Body>
        </Card>
    )
}

function Projects() {
    return (
        <div className="projectsAll">
            <div className="projectsTitle">
                <h1>Projects</h1>
                <p>Here are a few of the projects that have been created based on the client's requirements and design ideas</p>
            </div>
            <Row xs={1} md={2} className="g-4">
                {ProjectCards.map((project) => (
                    <Col key={project.id}>
                        <Card>
                            <Card.Body>
                                <Row>
                                    <Col sm={6} className='softwareUsed'>
                                        <h1>HTML</h1>
                                        <hr />
                                        <h1>CSS</h1>
                                        <hr />
                                        <h1>JavaScript</h1>
                                        <hr />
                                    </Col>
                                    <Col sm={6} className='projectMiniCard'>
                                        <ProjectCard
                                            projectname={project.projectname}
                                            image={project.image}
                                            description={project.description}
                                        />
                                    </Col>
                                </Row>
                            </Card.Body>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div >
    )
}

export default Projects;

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