使用 map 函数来展示带有引导卡的对象数组答案

【问题标题】：Using map function to present the array of objects with bootstrap cards使用 map 函数来展示带有引导卡的对象数组
【发布时间】：2021-11-20 08:33:45
【问题描述】：

我正在尝试在引导卡中显示电影 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;

【问题讨论】：

使用状态后删除空间
setTrendingResults.map(...) ----> trendingResults.map(...)

标签： reactjs api react-hooks map-function

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用有效状态来映射卡片。 trendingResults insted of setTrendingResults.

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

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;

【讨论】：