使用 map 函数用 bootstrap 卡片呈现对象数组

Question

我正在尝试在 bootstrap 卡片中呈现电影 API 数组数据，但似乎我仍然不了解反应钩子或地图函数，因为我无法获得代码正确。我得到这个“TypeError：setTrendingResults.map 不是函数”。

我的代码：

import Hero from "./Hero";
import Footer from "./Footer";
import { Link } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

const TrendingCard = ({ trending }) => {
  const trendPosterUrl = `https://image.tmdb.org/t/p/w500${trending.poster_path}`;
  const trendDetailUrl = `/movies/${trending.id}`;

  return (
    <div className="col-lg-4 col-md-3 col-2">
      <div className="card">
        <img
          src={trendPosterUrl}
          class="card-img-top"
          alt={trending.original_title}
        />
        <div className="card-body">
          <h5 className="card-title">{trending.original_title}</h5>
          <Link to={trendDetailUrl} class="btn btn-primary">
            Show details
          </Link>
        </div>
      </div>
    </div>
  );
};

const TrendingView = (data) => {
  const [trendingResults, setTrendingResults] = useState([]);

  useEffect(() => {
    fetch(
      "https://api.themoviedb.org/3/trending/movie/week?api_key=776d38251dae661e04c01631cfa95286"
    )
      .then((response) => response.json())
      .then((data) => {
        setTrendingResults(data.results);
      });
  });

  const trendingHtml = setTrendingResults.map((obj, i) => {
    return <TrendingCard trending={obj} key={i} />;
  });

  return (
    <div>
      <Hero text="Trending" />
      {trendingHtml && (
        <div className="container">
          <div className="row">{trendingHtml}</div>
        </div>
      )}
    </div>
  );
};

export default TrendingView;

Answer 1

setTrendingResults用于设置值为trendingResults状态。您必须使用 trendingResults 而不是 setTrendingResults.

const trendingHtml = trendingResults.map((obj, i) => {
  return <TrendingCard trending={obj} key={i} />
})

Answer 2

使用有效状态映射卡片。 trendingResults 而不是 setTrendingResults.

这里我用 React.useMemo 转换一个趋势 Html，这有助于避免重新渲染相关的东西。

const TrendingView = (data) => {
  const [trendingResults, setTrendingResults] = useState([]);

  useEffect(() => {
    fetch(
      "https://api.themoviedb.org/3/trending/movie/week?api_key=776d38251dae661e04c01631cfa95286"
    )
      .then((response) => response.json())
      .then((data) => {
        setTrendingResults(data.results);
      });
  });


  const trendingHtml = React.useMemo(()=> trendingResults?.map((obj, i) => {
    return (<TrendingCard trending={obj} key={i} />)
  }),[trendingResults])

  return (
    <div>
      <Hero text="Trending" />
      {trendingHtml && (
        <div className="container">
          <div className="row">{trendingHtml}</div>
        </div>
      )}
    </div>
  );
};

export default TrendingView;

使用 map 函数用 bootstrap 卡片呈现对象数组

Using map function to present the array of objects with bootstrap cards

api

reactjs

map-function

react-hooks