JSON & REACT 16.8 TypeError: _data_projects_json__WEBPACK_IMPORTED_MODULE_2__.map is not a function
JSON & REACT 16.8 TypeError: _data_projects_json__WEBPACK_IMPORTED_MODULE_2__.map is not a function
当我尝试完成以下映射函数时抛出错误“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"
}
]
}
您应该使用 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(双 t
)中的 属性 title
有错字。
下次可以使用console.log
调试数据
当我尝试完成以下映射函数时抛出错误“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"
}
]
}
您应该使用 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(双 t
)中的 属性 title
有错字。
下次可以使用console.log
调试数据