Блог

Главная - Вопросы по программированию - Использование функции карты для представления массива объектов с помощью загрузочных карт

Использование функции карты для представления массива объектов с помощью загрузочных карт

#reactjs #api #react-hooks #map-function

Вопрос:

Я пытаюсь представить данные массива API movie в загрузочных картах, но, похоже, я все еще ничего не понимаю в крючках реакции или функциях карты, потому что не могу правильно написать код. Я получаю это «Ошибка типа: setTrendingResults.карта не является функцией» .

Мой код:

 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 amp;amp; (
        <div className="container">
          <div className="row">{trendingHtml}</div>
        </div>
      )}
    </div>
  );
};

export default TrendingView;

Комментарии:

1. удалите пробел после использования

2. setTrendingResults.map(...) —-> trendingResults.map(...)

Ответ №1:

Используйте допустимое состояние для сопоставления карты. trendingResults вместо setTrendingResults этого .

Здесь я конвертирую trendingHtml, с React.useMemo помощью которого можно избежать повторной визуализации, связанной с этим.

 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 amp;amp; (
        <div className="container">
          <div className="row">{trendingHtml}</div>
        </div>
      )}
    </div>
  );
};

export default TrendingView;

Ответ №2:

setTrendingResults используется для установки значения в состояние trendingResults. Вы должны использовать трендовые результаты вместо трендовых результатов.

 const trendingHtml = trendingResults.map((obj, i) => {
  return <TrendingCard trending={obj} key={i} />
})
Метки: