当 json 文件上的 map() 函数时 React 道具不起作用

Question

我正在尝试从我制作的 json 文件中呈现信息以显示在页面上。我已经使用 bootstrap 来格式化卡片，但是当我在没有 bootstrap 格式化的情况下尝试它时，它仍然不起作用。对它缺少的东西有什么想法吗？

我的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" 
        
    }
]

json文件导入到的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;

想要从 json 文件中的信息显示在网页上。