JSON & REACT 16.8 TypeError: _data_projects_json__WEBPACK_IMPORTED_MODULE_2__.map is not a function

问题

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

标签

json

reactjs

react-16