迭代嵌套在数组中的对象中的数组

Question

寻找一些帮助来解决我遇到的关于react的问题。我需要遍历嵌套在每个对象中的数组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>
)}