使用map函数表示带有引导卡的对象数组

Question

我试图在引导卡中呈现电影API数组数据，但似乎我仍然不了解react hooks或map函数，因为我无法获得正确的代码。我得到这个"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

使用有效状态映射卡片。trendingResults代替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;

Answer 2

setTrendingResults 用于设置值为trendingResults状态。你必须使用trendingResults代替setTrendingResults.

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