0

当我尝试完成以下地图功能时，会抛出错误“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;

我已经研究了我使用 map 函数的方式，或者我的 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"
        }
    ]
}
4

1 回答 1

0

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

或者，只需将 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"
  }
]

在最后一种情况下，我建议使用 name importproject而不是Data.

此外，您title的 JSON (double t) 中的属性有拼写错误。

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

于 2020-06-28T18:04:17.530 回答