React随机电影应用如何通过onClick按钮实现年代、类型筛选联动展示对应影片

实现步骤&修正代码 #

首先你需要先保留一份全量的原始电影数据，不能直接修改电影列表状态，否则多次筛选后会丢失原始数据。所有逻辑调整如下：

import { useState, useEffect } from 'react'
// 假设你的原始全量电影列表从接口获取或者提前定义，示例：
const ORIGIN_MOVIES = [/* 你的所有电影原始数据 */]

function MovieRecommend() {
  // 先声明所有状态
  const [movies, setMovies] = useState(ORIGIN_MOVIES)
  const [genre, setGenre] = useState(null)
  const [decade, setDecade] = useState(null)

  // 按要求将useEffect放在业务逻辑顶部，依赖添加genre和decade，两个筛选值变化时自动重新筛选
  useEffect(() => {
    const filteredList = ORIGIN_MOVIES.filter(movie => {
      // 类型匹配判断：genre_ids通常为数组，判断是否包含选中的类型id
      const isGenreMatch = genre ? movie.genre_ids.includes(Number(genre)) : true
      // 年代匹配判断：先提取发布完整年份，再判断是否落在选中年代的10年区间内
      const releaseYear = new Date(movie.release_date).getFullYear()
      const isDecadeMatch = decade ? releaseYear >= Number(decade) && releaseYear < Number(decade) + 10 : true
      // 两个条件同时满足才返回对应影片
      return isGenreMatch && isDecadeMatch
    })
    setMovies(filteredList)
  }, [genre, decade])

  return (
    <div>
      <div className="Genre">
        <DropdownButton title="Genres">
          <Dropdown.Item id="27" onClick={() => setGenre(27)}>恐怖</Dropdown.Item>
          <Dropdown.Item id="28" onClick={() => setGenre(28)}>动作</Dropdown.Item>
          <Dropdown.Item id="35" onClick={() => setGenre(35)}>喜剧</Dropdown.Item>
          <Dropdown.Item id="10751" onClick={() => setGenre(10751)}>家庭</Dropdown.Item>
          <Dropdown.Item id="10749" onClick={() => setGenre(10749)}>爱情</Dropdown.Item>
          <Dropdown.Item id="18" onClick={() => setGenre(18)}>剧情</Dropdown.Item>
          {/* 可选增加重置选项：<Dropdown.Item onClick={() => setGenre(null)}>全部类型</Dropdown.Item> */}
        </DropdownButton>
      </div>

      <div className="decade">
        <Dropdown>
          <div className="App container">
            <Dropdown.Toggle variant="success">
              选择年代
            </Dropdown.Toggle>

            <Dropdown.Menu>
                <Dropdown.Item onClick={() => setDecade(1980)}>1980年代</Dropdown.Item>
                <Dropdown.Item onClick={() => setDecade(1990)}>1990年代</Dropdown.Item>
                <Dropdown.Item onClick={() => setDecade(2000)}>2000年代</Dropdown.Item>
                <Dropdown.Item onClick={() => setDecade(2010)}>2010年代</Dropdown.Item>
                <Dropdown.Item onClick={() => setDecade(2020)}>2020年代</Dropdown.Item>
                {/* 可选增加重置选项：<Dropdown.Item onClick={() => setDecade(null)}>全部年代</Dropdown.Item> */}
            </Dropdown.Menu>
          </div>
        </Dropdown>
      </div>

      {/* 下方直接渲染筛选后的movies列表即可 */}
      <div className="movie-list">
        {movies.map(movie => <div key={movie.id}>{movie.title}</div>)}
      </div>
    </div>
  )
}

核心修正点 #

• 新增全量原始电影常量ORIGIN_MOVIES，每次筛选都从全量数据中过滤，不会丢失原始数据
• 修正useEffect依赖数组，添加genre和decade，两个筛选条件变化时会自动触发重新筛选
• 修正类型匹配逻辑：适配绝大多数电影数据的genre_ids数组结构，用includes判断类型匹配
• 修正年代匹配逻辑：从完整上映日期中提取年份，判断是否落在选中年代的10年区间内
• 修复所有下拉选项的点击事件，正确调用状态更新方法传入对应值
• 两个筛选条件默认设为null，未选中时默认匹配所有数据，天然支持联动筛选效果

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