问题
The error "TypeError: data_projects_json__WEBPACK_IMPORTED_MODULE_2_.map is not a function" is thrown when I try to complete the following map 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;
I have researched if the way I'm using the map function or if my JSON file is not structured correctly, and I can't find where I went wrong.
This is my JSON file:
{
"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"
}
]
}
回答1:
You should use Data.projects.map()
to access to the projects
array of your json.
Or, just replace json data to something like this:
[
{
"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"
}
]
In the last case I recommend name import as project
instead of Data
.
Also, you have typo in property title
in your JSON (double t
).
Next time, you may use console.log
to debug data.
来源:https://stackoverflow.com/questions/62626357/json-react-16-8-typeerror-data-projects-json-webpack-imported-module-2-ma