映射对象数组 React

Question

So I am currently having a little problem here. So I have this Component that is taking data from JSON, I have Link but is showing the like 20 times more. The same amount of objects that I have in JSON file. I know this is the problem {data.map((postData) , it is mapping all the objects in JSON file, when I want that the only ( classE , priceE and imageE ) to show.

import React from "react";
import data from "./data.json";
import { Link } from "react-router-dom";
function E() {
  return (
    <div>
      {data.map((postData) => {
        return (
          <div key={postData.id} className="m-4 bg-blue-100 rounded-xl p-8 ">
            <div>
              <Link
                to={`/payment/${postData.id}`}
                className="py-1 px-2 text-black-600 h-10  ml-24 mt-32 bg-white w- 
            36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600"
              >
                Buy Now
              </Link>
              <img
                alt=""
                className="w-screen object-contain"
                src={postData.imageE}
              ></img>
              <h1 className=" ml-24 md:text-5xl sm:text-5xl  top-8">
                {postData.classE}
              </h1>
              <h1 className="text-base font-mono ml-24 top-24">
                {postData.priceE}
              </h1>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default E;

JSON file

[
  {
    "id": 0,
    "class": "A-Class",
    "Info": "A is the cheapest one ",
    "imageA": "./ModImages/Aclass.jpg",
    "textA": "fdsd",
    "trefuA": "fdsd",
    "optionA": "fdsd"
  },
  {
    "id": 1,
    "classE": "E-Class",
    "imageE": "./ModImages/Eclass.jpg",
    "priceE": "$43,600"
  }
]

Answer 1

Try this:

{data.filter(d =>
  d.classE &&
  d.imageE &&
  d.priceE) //FILTER FIRST
  .map((postData) => { //THEN MAP
  //CODE HERE
  })
}

You filter the data first, then you map it

Answer 2

If you want to display only the objects with the properties classE , imageE , and priceE , you need to filter out the objects you are not interested in.

Change this line:

{data.map((postData) => {

to:

{data.filter(d =>
  d.hasOwnProperty('classE') &&
  d.hasOwnProperty('imageE') &&
  d.hasOwnProperty('priceE'))
  .map((postData) => {

That will display only the objects you want.