我需要帮助呈现一个嵌套数组

Question

我有一个可以映射的部门数组(图1)，但是当我到达嵌套数组时，我似乎无法将它们呈现为单独的div。我正在从JSON文件构建一个过滤器。我有部门分裂成他们自己的盒子，我现在需要的科目分成各自的部门在各自部门的盒子内各自的部门。我试着重新绘制地图，但它告诉我，它不能读懂州.我搞混了，知道这是我错过的小东西。请帮帮忙。

​

import "./main.css";
import info from "./departments.json"
import { useState } from 'react';


function App({ name, subjects }) {

  const [state, setState] = useState(info);



  const handleBtns = (e) => {
  
    let word = e.target.value;

    if (word === 'All') {
      setState(info)
    }
    else if (word === 'Architecture and History of Art') {
      const filtered = info.filter(item => item.name === 'Architecture and History of Art');
      setState(filtered);
    }
    else if (word === 'Physical Education') {
      const filtered = info.filter(item => item.name === 'Physical Education');
      setState(filtered);
    }
    else if (word === 'Physics') {
      const filtered = info.filter(item => item.name === 'Physics');
      setState(filtered);
    }
    else if (word === 'Εlectrical & Electronics Engineering') {
      const filtered = info.filter(item => item.name === 'Εlectrical & Electronics Engineering');
      setState(filtered);
    }
    else if (word === 'Computer Science') {
      const filtered = info.filter(item => item.name === 'Computer Science');
      setState(filtered);
    }
  }
  
  return (
    <div className="App">
      <div className="btns">
        <button value="All" onClick={handleBtns}>All</button>
        <button value="Architecture and History of Art" onClick={handleBtns}>Architecture and History of Art</button>
        <button value="Physical Education" onClick={handleBtns}>Physical Education</button>
        <button value="Physics" onClick={handleBtns}>Physics</button>
        <button value="Εlectrical & Electronics Engineering" onClick={handleBtns}>Εlectrical & Electronics Engineering</button>
        <button value="Computer Science" onClick={handleBtns}>Computer Science</button>
      </div>
      
      <div className="single-box">
        <div className="mob">
          {state.map((item) => (
            <div className="departments-wrapper" key={item.name}>
              <h4><b>{item.name}</b></h4>
              {state.map((item) => (
              <div className="subjects-wrapper" key={item.subjects}>
              <div className="subjects">{item.subjects}</div>
                </div>
                  ))}
          </div>
              ))}
        </div>
      </div>
    </div> 
 )
}
          
      
export default App

​

​

[{
        "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"
        ]
    }
]

​

图2

图3

Answer 1

这就是你要找的吗？

{state.map((item) => (
   <div className="departments-wrapper" key={item.name}>
       <h4><b>{item.name}</b></h4>
       <div className="subjects-wrapper">
          {item.subjects.map((subject) => (
             <div className="subjects">{subject}</div>
          ))}
       </div>
   </div>
))}