如何用React+Axios筛选与基努·里维斯和凯奇合作过的演员

首先纠正你代码里的一个小问题：Axios的headers参数应该是对象格式，不是字符串，否则CORS令牌不会生效，修正后是：

headers: { 'x-chmura-cors': 'c3ed0d1a-98f4-42e8-bff9-956b17323892' }

接下来，要找出同时与两位演员合作过的演员，核心思路是：

1. 筛选出基努·里维斯（actorId:206）参演的所有电影，提取这些电影里的全部演员
2. 筛选出尼古拉斯·凯奇（actorId:115）参演的所有电影，提取这些电影里的全部演员
3. 找出两个演员列表的交集，同时排除这两位目标演员本身
4. 可选：调用/actors接口获取演员姓名，让结果更直观

以下是修改后的完整代码，附带详细注释：

import './App.css';
import axios from 'axios';
import { useEffect, useState } from 'react';

const TARGET_ACTORS = {
  keanu: 206,
  cage: 115
};

function App() {
  const [movies, setMovies] = useState([]);
  const [commonActors, setCommonActors] = useState([]);
  const [actorNames, setActorNames] = useState({});

  useEffect(() => {
    // 1. 获取所有电影数据
    axios.request({
      method: 'GET',
      baseURL: 'https://switch-yam-equator.azurewebsites.net/api/movies',
      headers: { 'x-chmura-cors': 'c3ed0d1a-98f4-42e8-bff9-956b17323892' }
    }).then(res => {
      setMovies(res.data);
      processCommonActors(res.data);
    }).catch(err => console.log(err));
  }, []);

  // 处理数据，找出共同合作的演员
  const processCommonActors = (movieData) => {
    // 筛选基努参演的电影，提取所有演员ID
    const keanuMovies = movieData.filter(movie => movie.actors.includes(TARGET_ACTORS.keanu));
    const keanuCoActors = new Set(keanuMovies.flatMap(movie => movie.actors));

    // 筛选尼古拉斯·凯奇参演的电影，提取所有演员ID
    const cageMovies = movieData.filter(movie => movie.actors.includes(TARGET_ACTORS.cage));
    const cageCoActors = new Set(cageMovies.flatMap(movie => movie.actors));

    // 找交集，排除两位目标演员
    const common = [...keanuCoActors].filter(actorId => {
      return cageCoActors.has(actorId) && actorId !== TARGET_ACTORS.keanu && actorId !== TARGET_ACTORS.cage;
    });

    setCommonActors(common);
    // 调用actors接口获取演员姓名
    fetchActorNames(common);
  };

  // 获取演员姓名
  const fetchActorNames = (actorIds) => {
    if (actorIds.length === 0) return;
    axios.request({
      method: 'GET',
      baseURL: 'https://switch-yam-equator.azurewebsites.net/api/actors',
      headers: { 'x-chmura-cors': 'c3ed0d1a-98f4-42e8-bff9-956b17323892' }
    }).then(res => {
      const nameMap = {};
      res.data.forEach(actor => {
        nameMap[actor.actorId] = actor.name;
      });
      setActorNames(nameMap);
    }).catch(err => console.log(err));
  };

  return (
    <div className="App">
      <h1>同时与基努·里维斯和尼古拉斯·凯奇合作过的演员</h1>
      <table>
        <tr>
          <th>Actor ID</th>
          <th>演员姓名</th>
        </tr>
        {commonActors.map(actorId => (
          <tr key={actorId}>
            <td>{actorId}</td>
            <td>{actorNames[actorId] || '加载中...'}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

export default App;

关键逻辑说明： #

• 使用Set存储演员ID，自动去重，提升交集查找效率
• flatMap用于将多维的演员数组（每个电影一个数组）扁平化，得到所有参演过的演员ID
• 最后过滤交集时排除两位目标演员本身，避免结果包含他们自己
• 调用/actors接口将ID转换为姓名，让展示更友好

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