JSON & REACT 16.8 TypeError: _data_projects_json__WEBPACK_IMPORTED_MODULE_2__.map 不是函数

Question

当我尝试完成以下地图功能时，抛出错误“TypeError: data_projects_json__WEBPACK_IMPORTED_MODULE_2_.map is not a function”。

import React from 'react';
import './Projects.scss'
import Data from '../../data/projects.json'


function Projects (){
    
    return (
        <section id="projects">
            <h1>PROJECTS</h1>
            <div>
            {Data.map(post => {
                return(
                    <div className="projects" key={i}>
                        <h2>{post.title}</h2>
                        <img>{post.img}</img>
                        <a>{post.site}</a>
                        <a>{post.repo}</a>
                    </div>
                )
            })}
            </div>
        </section>
    )

}

export default Projects;

我研究了我使用地图功能的方式，或者我的 JSON 文件结构不正确，我找不到哪里出错了。

这是我的 JSON 文件：

{
    "projects" : [
        {
            "id":1,
            "tittle" : "Furever",
            "img" : "../assets/images/Furever.jpeg",
            "repo": "https://github.com/CarolinaKlein/C36_midterm_carolina_elias_rene_tristan",
            "site": "https://fureverapp.herokuapp.com/",
            "stack": ["react", "Express.js"],
            "description": "Also created at Wyncode Academy, FurEver is a petfinding app built with React and Express JS, which utilizes Petfinder's O-Auth API. FurEver is designed to help match adoptable pets with forever homes in a fun, user-friendly interface."
        },
        {   "id":2,
            "tittle" : "Mission Booked",
            "img" : "../assets/images/Mission_Booked.jpeg",
            "repo": "https://github.com/CarolinaKlein/C36_better_together_now_2",
            "site": "https://mission-booked.herokuapp.com/",
            "stack": ["react", "rails", "postgreSQL"],
            "description": "Created while at Wyncode Academy, Mission Booked is a React-Rails app with a PostgreSQL database. It is designed to help people find volunteer opportunities and charitable organizations tailored to their interests."
        },
        {
            "id":3,
            "tittle": "JoJo Quizz",
            "img": "../assets/images/jojo.jpeg",
            "repo": "",
            "site": "http://nickelodeon-jojo-siwa-questions-walmart.s3-website-us-west-2.amazonaws.com/DEV/#/",
            "stack": "react",
            "description": "For my onboarding project at Mod Op, we built a quizz for a collaboration between Nickelodeon and Walmart using React"
        }
    ]
}

Answer 1

您应该使用Data.projects.map() 来访问您的json 的projects 数组。

或者，只需将 json 数据替换为以下内容：

[
  {
    "id":1,
    "title" : "Furever",
    "img" : "../assets/images/Furever.jpeg",
    "repo": "https://github.com/CarolinaKlein/C36_midterm_carolina_elias_rene_tristan",
    "site": "https://fureverapp.herokuapp.com/",
    "stack": ["react", "Express.js"],
    "description": "Also created at Wyncode Academy, FurEver is a petfinding app built with React and Express JS, which utilizes Petfinder's O-Auth API. FurEver is designed to help match adoptable pets with forever homes in a fun, user-friendly interface."
  },
  {   
    "id":2,
    "title" : "Mission Booked",
    "img" : "../assets/images/Mission_Booked.jpeg",
    "repo": "https://github.com/CarolinaKlein/C36_better_together_now_2",
    "site": "https://mission-booked.herokuapp.com/",
    "stack": ["react", "rails", "postgreSQL"],
    "description": "Created while at Wyncode Academy, Mission Booked is a React-Rails app with a PostgreSQL database. It is designed to help people find volunteer opportunities and charitable organizations tailored to their interests."
  },
  {
    "id":3,
    "title": "JoJo Quizz",
    "img": "../assets/images/jojo.jpeg",
    "repo": "",
    "site": "http://nickelodeon-jojo-siwa-questions-walmart.s3-website-us-west-2.amazonaws.com/DEV/#/",
    "stack": "react",
    "description": "For my onboarding project at Mod Op, we built a quizz for a collaboration between Nickelodeon and Walmart using React"
  }
]

在最后一种情况下，我建议将名称导入为project 而不是Data。

此外，您在 JSON 中的属性 title 中有错字（双 t）。

下次可以使用console.log调试数据。