我试图在对象内部呈现一个数组。我有一个departments.json文件，作为数据导入到我的app.jsx中

Question

我有反应。我有一个departments.json文件，我正在从它中提取数据：import Data from "./departments.json"

我的信息是一个对象数组，在每个对象中，我有一个包含多个值数组的键。我正试图将这些值呈现为单独的div。

我曾经使用.map来呈现，但是它会在一个div中显示每个对象分组在一起的所有值。我真的需要这些价值观在他们自己的领域。因此，每个对象都有多个div分组。这是输出：

​

​

构成部分：

import Data from "./departments.json";
import Info from "./students.json";

function App() {

  console.log(Info)
  console.log(Data)

  return (
    <div className="App">
      <ul className="filtered-student">
        {Info.map(function(student, index){
          return (
            <li key={student.id}>
              <span className="name">{[`${student.familyName}, ${student.givenName}`]}</span>
              <span className="dob">DOB: <span className="value">{student.dob}</span></span>
              <span className="admit-date">Admitted: <span className="value">{student.admitDate}</span></span>
              <span className="grad-date">Anticipated Graduation: <span className="value">{student.anticipatedGraduationDate}</span></span>
              <span className="mentor">Mentor: <span className="value">{[student.mentor.familyName, student.mentor.givenName]}</span></span>
            </li>    
          )
        })}
      </ul>
      <div className="filtered-department">
        {Data.map(function(department, index){
          return (    
            <div key={index} className="dept-name">{department.subjects}</div>
          )
        })}
      </div>
    </div> 
  );
}

export default App;

JSON文件：

[{
        "name": "Architecture and History of Art",
        "subjects": [
            "Painting",
            "Sculpture",
            "Architecture",
            "Drawing, printing, photography, collage and film",
            "The art and architecture of antiquity",
            "Art, religion and society",
            "Art, society and politics"
        ]
    },
    {
        "name": "Physical Education",
        "subjects": [
            "Anatomy and physiology",
            "Social, cultural and ethical influences",
            "Skill acquisition and psychology",
            "Health, fitness and training"
        ]
    },
    {
        "name": "Physics",
        "subjects": [
            "Physical quantities and units",
            "Measurement techniques",
            "Dynamics",
            "Forces, density and pressure",
            "Work, energy and power",
            "Deformation of solids",
            "Waves",
            "Superposition",
            "Electric fields",
            "Current of electricity",
            "D.C. circuits",
            "Particle and nuclear physics"
        ]
    },
    {
        "name": "Εlectrical & Electronics Engineering",
        "subjects": [
            "Circuit Theory & Networks",
            "Electrical & Electronic Measurement",
            "Data Structure & Algorithms",
            "Materials Science",
            "Mathematics",
            "Numerical Methods & Programming",
            "Computer Organization & Architecture",
            "Technical Report writing"
        ]
    },
    {
        "name": "Computer Science",
        "subjects": [
            "Information representation",
            "Communication and Internet technologies",
            "Hardware",
            "Processor fundamentals",
            "System software",
            "Security, privacy and data integrity",
            "Ethics and ownership",
            "Database and data modelling",
            "Algorithm design and problem-solving",
            "Data representation",
            "Programming",
            "Software development",
            "Monitoring and control systems"
        ]
    }
]

Answer 1

也许我没有正确理解你需要什么，但试试这个：

<div className="App">
  <ul className="filtered-student">
    {Info.map((student) => (
        <li key={student.id}>
          <span className="name">
            {[`${student.familyName}, ${student.givenName}`]}
          </span>
          <span className="dob">
            DOB: <span className="value">{student.dob}</span>
          </span>
          <span className="admit-date">
            Admitted: <span className="value">{student.admitDate}</span>
          </span>
          <span className="grad-date">
            Anticipated Graduation:{' '}
            <span className="value">
              {student.anticipatedGraduationDate}
            </span>
          </span>
          <span className="mentor">
            Mentor:{' '}
            <span className="value">
              {[student.mentor.familyName, student.mentor.givenName]}
            </span>
          </span>
        </li>
    ))}
  </ul>

  <div className="filtered-department">
    {Data.map((department) => (
        <div key={department.name} className="dept-name">
          {department.subjects.map((subject) => <div>{subject}</div>)}
        </div>
    ))}
  </div>
</div>