如何实现按钮列出肖恩·康纳利参演的邦德电影？

直接给你可复用的代码实现，结合现有React项目结构调整即可：

核心实现步骤 #

1. 对接现有电影数据 #

确保你的电影数据是结构化的JS对象/数组（如果是从接口获取，已完成解析的话无需再用JSON.parse），示例数据如下：

// 本地模拟或接口返回的解析后数据
const bondMovies = [
  { title: "007之诺博士", year: 1962, actors: ["肖恩·康纳利", "乌苏拉·安德丝"] },
  { title: "007之来自俄罗斯的爱情", year: 1963, actors: ["肖恩·康纳利", "丹妮拉·碧安琪"] },
  { title: "007之金手指", year: 1964, actors: ["肖恩·康纳利", "霍纳尔·布莱克曼"] },
  { title: "007之霹雳弹", year: 1965, actors: ["肖恩·康纳利", "克劳迪娜·奥格尔"] },
  { title: "007之雷霆谷", year: 1967, actors: ["肖恩·康纳利", "滨美枝"] },
  { title: "007之金刚钻", year: 1971, actors: ["肖恩·康纳利", "吉尔·圣约翰"] },
  { title: "007之巡弋飞弹", year: 1983, actors: ["肖恩·康纳利", "克劳斯·马利亚·布朗道尔"] },
  // 其他邦德电影数据...
];

2. 组件内实现筛选逻辑 #

用React的useState管理筛选结果，点击按钮时执行筛选：

import { useState } from 'react';

function BondMovieFilter() {
  const [filteredMovies, setFilteredMovies] = useState([]);

  // 筛选肖恩·康纳利参演的邦德电影
  const showConneryMovies = () => {
    const result = bondMovies.filter(movie => 
      // 根据你实际数据的字段名调整（比如cast/actors）
      movie.actors.some(actor => actor.trim() === "肖恩·康纳利")
    );
    setFilteredMovies(result);
  };

  return (
    <div>
      {/* 你的现有分类按钮 */}
      <button>按导演分类</button>
      <button>按演员分类</button>
      
      {/* 新增的筛选按钮 */}
      <button onClick={showConneryMovies}>肖恩·康纳利的邦德电影</button>

      {/* 渲染筛选结果 */}
      <div className="movie-results">
        {filteredMovies.length > 0 ? (
          <ul>
            {filteredMovies.map((movie, idx) => (
              <li key={idx}>{movie.title} ({movie.year})</li>
            ))}
          </ul>
        ) : (
          <p>点击上方按钮查看列表</p>
        )}
      </div>
    </div>
  );
}

export default BondMovieFilter;

关于JSON.parse无效的问题排查 #

1. 数据类型判断：如果是用fetch获取接口数据，res.json()已经完成了解析，无需再调用JSON.parse；本地JSON文件导入后直接是JS对象，重复解析会报错。
2. 数据结构校验：检查电影数据中演员字段的键名是否正确（比如是actors还是cast），演员名称是否和匹配字符串完全一致（注意空格、译名差异）。
3. 事件绑定检查：确认按钮的onClick属性是否正确关联到筛选函数，无拼写错误。

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