来自 API 的数据：检索特定数据 JS

Question

我是新手前端，刚开始使用后端API有这个API：https://sportpro3.herokuapp.com/api/sports/Sports/其中有字段：图像，标题，描述，category_of_sports：category问题如下：是否可以获得这些数据其中 category_of_sports:category 例如：奥林匹克运动

如果我请求，所有数据都会来

每一个答案我都会很高兴！:)

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));
      console.log(response);
      setMainCards(response.data);
    };

    fetchMain();
  }, []);

  console.log(mainCards);

  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={mainCards} />
          <div className="sports__title">Olympia sports</div>
          <OlympicSport />
          <div className="sports__title">Nonolympia sports</div>
          <NotOlympicSport />
          <div className="sports__title">Para and Sourdough</div>
          <ParaSport />
        </div>
      </div>
    </>
  );
};

Main Component

function MainComponent({ mainCards }) {
  return (
    <div>
      {mainCards &&
        mainCards.map((mainCards) => (
          <MainInfo mainCards={mainCards} key={mainCards.id} />
        ))}
    </div>
  );
}

export default MainComponent;

MainINfo


function MainInfo({ mainCards }) {
  return (
    <div className="main__info">
      <img src={mainCards.image} alt="" className="main__image"></img>
      <div className="main__container">
        <div className="main__up">
          <span className="main__author">{mainCards.title}</span> <br />
        </div>
        <h1 className="main_title">{mainCards.description}</h1>
        <p>{mainCards.category_of_sports.category}</p>
        <Link to={`/main/${mainCards.toString()}`}>Read more...</Link>
      </div>
    </div>
  );
}

export default MainInfo;

Answer 1

const filteredData = data.filter((obj)=> obj.category_of_sports.category === 'Olympic');

filter() 函数创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。所以我们传递了一个箭头函数，其中obj参数代表数据数组的对象。