前端新手调用体育API如何筛选获取指定category_of_sports分类的数据

目前有两种常见实现思路，你可以根据后端接口的实际情况选择：

方案1：通过API查询参数直接获取过滤后的数据（优先推荐） #

如果你的后端API支持字段过滤（绝大多数RESTful规范的接口都支持该能力），可以直接在请求时携带查询参数，由后端直接返回符合要求的数据，减少无效数据传输。
你可以修改axios请求代码，添加params参数：

const response = await axios
  .get("https://sportpro3.herokuapp.com/api/sports/Sports/", {
    params: {
      // 具体参数名可以和后端同学确认，常见写法如下
      'category_of_sports__category': 'Olympic sports'
    }
  })
  .catch((err) => console.log(err));

如果参数匹配的话，接口直接就会只返回category为Olympic sports的数据，不需要额外处理。

方案2：前端拿到全量数据后自行过滤（无需后端配合，快速实现） #

如果后端暂时没有提供过滤能力，你可以在拿到全量数据后，用数组的filter方法筛选符合要求的数据，适配你现在的多分类渲染场景，修改你的MainPart组件代码即可：

export const MainPart = () => {
  const [mainCards, setMainCards] = useState([]);

  useEffect(() => {
    const fetchMain = async () => {
      const response = await axios
        .get("https://sportpro3.herokuapp.com/api/sports/Sports/")
        .catch((err) => console.log(err));
      setMainCards(response.data || []);
    };

    fetchMain();
  }, []);

  // 提前按类别过滤好数据
  const nationalSports = mainCards.filter(item => item.category_of_sports.category === 'National Sports');
  const olympicSports = mainCards.filter(item => item.category_of_sports.category === 'Olympic sports');
  const nonOlympicSports = mainCards.filter(item => item.category_of_sports.category === 'Nonolympia sports');
  const paraSports = mainCards.filter(item => item.category_of_sports.category === 'Para and Sourdough');

  return (
    <>
      <div className="main">
        <div className="main__container">
          
          <div className="main__title">Sports</div>
          <div className="sports__title">National Sports</div>
          <div className="main__cards"></div>
          
          <MainComponent mainCards={nationalSports} />
          <div className="sports__title">Olympia sports</div>
          <MainComponent mainCards={olympicSports} />
          <div className="sports__title">Nonolympia sports</div>
          <MainComponent mainCards={nonOlympicSports} />
          <div className="sports__title">Para and Sourdough</div>
          <MainComponent mainCards={paraSports} />
        </div>
      </div>
    </>
  );
};

这种方式不需要调整其他组件代码，直接复用你已经写好的MainComponent、MainInfo组件即可。

额外注意的小问题 #

你当前代码里有两处小bug可以顺便修正：

• MainComponent里map的参数名和传入的数组名重名了，容易引发作用域问题，建议改成mainCards.map(card => <MainInfo mainCards={card} key={card.id} />)
• MainInfo里的Link跳转路径写的是mainCards.toString()，会得到[object Object]的无效路径，建议改成mainCards.id来拼接详情页路径

内容的提问来源于stack exchange，提问作者Нурлан Маннапов