React(JavaScript)遍历字典指定键实现侧边栏的问题求助

问题情况 #

我想用React创建一个侧边栏，展示文章标题以及标题与对应子标题的列表（格式为[标题][子标题]、[标题2][子标题2]等）。数据以数组存储对象的形式保存，但使用map函数遍历时出现问题，当前代码仅渲染出第一个标题和第一个子标题数组。

原代码 #

import React, {useState} from 'react'
import {DUMMY_POSTS} from '../data'
import Thumbnail1 from '../images/1.png'

const DUMMY_POST = [
  {
      id: '1',
      thumbnail: Thumbnail1,
      category:'NPO',
      title:'1971',
      headers:['Logo','Colors','Typography','Graphical Elements','Applications'],
      sub_headers:[[''],
                  ['Main Colors','Space Neutrals','Heading'],
                  [''],
                  [''],
                  ['Postcards','Accreditations','Ticket Packaging','Event Schedule']],
  }]

const PostDetail = () => {

  const [postDetails,setPostDetails] = useState(DUMMY_POST)

  return (
    <section className='PostDetails'>
      <div className="details__sidebar">
        {postDetails.map(({id,title}) => {
            return <div className="details__sidebar__container">
            <div className='details__sidebar__title'>
                <h3>{title}</h3>
            </div>
            </div> })}
            {postDetails.map(({headers,sub_headers}, index) => {
              return<div className="details__sidebar__headers" key = {index}>
              <ul><h4>{headers[index]}</h4> </ul> 
              <div className="details__sidebar__sub-headers">
                <p>{sub_headers[index]}</p>
            </div>
            </div>
        })}


          <div className='Post__Details'>
            Post Details
          </div>
          </div>
        </section>
  )
}
export default PostDetail

问题分析 #

原代码的核心问题是第二次遍历postDetails时，错误地用遍历数组的index去取headers和sub_headers的元素。由于postDetails只有一个元素，所以只会执行一次遍历，只能拿到第一个header和对应的子标题数组，无法遍历所有的header项。

正确的逻辑应该是：遍历每个post，先渲染文章标题，再遍历该post的headers数组，同时对应取出sub_headers中同索引的子数组，根据子数组内容渲染子标题列表。

修正后的代码 #

import React, { useState } from 'react'
import { DUMMY_POSTS } from '../data'
import Thumbnail1 from '../images/1.png'

const DUMMY_POST = [
  {
    id: '1',
    thumbnail: Thumbnail1,
    category: 'NPO',
    title: '1971',
    headers: ['Logo', 'Colors', 'Typography', 'Graphical Elements', 'Applications'],
    sub_headers: [
      [''],
      ['Main Colors', 'Space Neutrals', 'Heading'],
      [''],
      [''],
      ['Postcards', 'Accreditations', 'Ticket Packaging', 'Event Schedule']
    ],
  }
]

const PostDetail = () => {
  const [postDetails, setPostDetails] = useState(DUMMY_POST)

  return (
    <section className='PostDetails'>
      <div className="details__sidebar">
        {postDetails.map(post => (
          <div className="details__sidebar__container" key={post.id}>
            {/* 渲染文章标题 */}
            <div className='details__sidebar__title'>
              <h3>{post.title}</h3>
            </div>
            {/* 遍历headers数组，渲染每个header和对应子标题 */}
            {post.headers.map((header, idx) => {
              const subHeaders = post.sub_headers[idx]
              // 过滤空字符串，避免渲染空的li
              const validSubHeaders = subHeaders.filter(item => item.trim() !== '')
              
              return (
                <div className="details__sidebar__headers" key={idx}>
                  <h4>{header}</h4>
                  {/* 只有存在有效子标题时才渲染列表 */}
                  {validSubHeaders.length > 0 && (
                    <ul className="details__sidebar__sub-headers">
                      {validSubHeaders.map((subHeader, subIdx) => (
                        <li key={subIdx}>{subHeader}</li>
                      ))}
                    </ul>
                  )}
                </div>
              )
            })}
          </div>
        ))}

        <div className='Post__Details'>
          Post Details
        </div>
      </div>
    </section>
  )
}

export default PostDetail

说明 #

1. 先遍历postDetails数组，每个post单独渲染容器，用post.id作为父容器的key，符合React列表key的规范。
2. 在每个post内部，遍历headers数组，用当前header的索引idx去对应取sub_headers里的子数组。
3. 增加了空字符串过滤逻辑，避免渲染空的子标题项。
4. 只有当有效子标题数量大于0时，才渲染子标题列表，符合需求伪代码的判断逻辑。

内容的提问来源于stack exchange，提问作者MKTB