如何在React中按流派分组含多流派的电影对象数组？

提问 #

我有一个包含多部电影对象的数组，每部电影都属于多个流派。请问在React中，遍历这个对象数组并按流派分组的最优方式是什么？

期望输出：

• Action
  • Movie 1
  • Movie 2
  • Movie 5
• Crime
  • Movie 1
  • Movie 4
• Drama
  • Movie 1
  • Movie 3
  • Movie 4
• Horror
  • Movie 3
  • Movie 5

提供的代码：

import _ from 'lodash'

const movieList = [
  {
    "genres": ["Action","Crime","Drama"],
    "title": "Movie 1"
  },
  {
    "genres": ["Action","Comedy"],
    "title": "Movie 2"
  },
  {
    "genres": ["Drama","Horror"],
    "title": "Movie 3"
  },
  {
    "genres": ["Crime","Drama"],
    "title": "Movie 4"
  },
  {
    "genres": ["Action","Crime","Horror"],
    "title": "Movie 5"
  }
]

export default function Home() {
  const [movies, setMovies] = useState(movieList)
  
  return (
    // return movies listed by genre
  )
}

这里提供两种实用方案，可根据项目是否依赖第三方库选择：

方案一：基于Lodash实现（已引入库） #

利用Lodash的flatMap和groupBy方法快速完成分组逻辑，先将每个电影按所属流派拆分为多组条目，再按流派名称聚合：

import _ from 'lodash'
import { useState } from 'react'

const movieList = [
  // 电影数据同上，省略重复部分
]

export default function Home() {
  const [movies, setMovies] = useState(movieList)

  // 核心分组逻辑
  const groupedMovies = _.chain(movies)
    .flatMap(movie => movie.genres.map(genre => ({ genre, title: movie.title })))
    .groupBy('genre')
    .value()

  return (
    <ul style={{ listStyleType: 'none' }}>
      {Object.entries(groupedMovies).map(([genre, items]) => (
        <li key={genre} style={{ margin: '8px 0' }}>
          <strong>{genre}</strong>
          <ul style={{ listStyleType: 'disc', marginLeft: '20px' }}>
            {items.map((item, idx) => (
              <li key={idx}>{item.title}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  )
}

方案二：原生JavaScript实现（无第三方依赖） #

如果不想依赖Lodash，用原生数组的reduce方法也能高效完成分组：

import { useState } from 'react'

const movieList = [
  // 电影数据同上，省略重复部分
]

export default function Home() {
  const [movies, setMovies] = useState(movieList)

  // 原生分组逻辑
  const groupedMovies = movies.reduce((acc, movie) => {
    movie.genres.forEach(genre => {
      if (!acc[genre]) acc[genre] = []
      acc[genre].push(movie.title)
    })
    return acc
  }, {})

  return (
    <ul style={{ listStyleType: 'none' }}>
      {Object.entries(groupedMovies).map(([genre, titles]) => (
        <li key={genre} style={{ margin: '8px 0' }}>
          <strong>{genre}</strong>
          <ul style={{ listStyleType: 'disc', marginLeft: '20px' }}>
            {titles.map((title, idx) => (
              <li key={idx}>{title}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  )
}

注意事项 #

• 示例中用索引idx作为元素key，若你的电影对象有唯一ID（比如id字段），建议替换为唯一ID，避免列表更新时的性能问题。
• 两种方案都能生成你期望的层级结构，可根据项目依赖情况选择。

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