遍历嵌套在 object 中的数组，该数组嵌套在 React 数组中

Question

寻找一些关于我在反应方面遇到的问题的帮助。 我需要遍历嵌套在每个 object 中的数组 ItemTypes，它们都嵌套在 useState 数组中。 我试过使用 for 循环，但我不确定我会把它放在哪里。 任何帮助或朝着正确方向轻推将不胜感激。

干杯!

import React, { useState } from 'react';
import './StudentProjectLib.css'
import SideBarCheckbox from './checkboxSideBar'


function ProjectSideBar() {

    const [checkboxes, setCheckboxes  ] = useState([

        { title: 'Subscription', itemTypes: ['Free', 'Premium'], id:1 },
        { title: 'Activity Type', itemTypes: ['Animation', 'Game', 'Chatbot', 'Augmented Reality'], id: 2 },
        { title: 'Year Level', itemTypes: ['1-4', '5-6', '7-8', '9-13'], id:3 },
        { title: 'Subject Matter', itemTypes: ['Computer Science', 'Maths', 'Science', 'Language', 'Art', 'Music'], id:4 },

    ])
        
    return (
        <div>
            {checkboxes.map((checkbox) => (
                <div className='ProjectSideBar'>
                    <h1 className= 'TableHeader'>{checkbox.title}</h1>
                   <div>
                    <SideBarCheckbox className = 'CheckBoxContainer'/>{checkbox.itemTypes}
                    </div>
                    
                </div>    
                
            )
                
                
            )}

        </div>
    )}


export default ProjectSideBar;

Answer 1

如果我正确理解您的问题，您只需要再次使用.map()即可。

return (
  <div>
    {checkboxes.map((checkbox) => (
      <div className='ProjectSideBar'>
          <h1 className= 'TableHeader'>{checkbox.title}</h1>
          <div>
          <SideBarCheckbox className = 'CheckBoxContainer'/>
          {checkbox.itemTypes.map((item) => (
            <span>{item}</span> // Or whatever you want to do with item
          )}
          </div>
          
      </div>    
    )}
  </div>
)}