Блог

я здесь новичок! Я пытаюсь создать раздел фильтрации по жанру с этими данными.JSON следующим образом:

   "movies": [
    {
      "title": "The Shawshank Redemption",
      "release": "1994",
      "rating": "9.2",
      "genre": "Drama",
      "id": 1
    },
    {
      "title": "The Godfather",
      "release": "1972",
      "rating": "9.1",
      "genre": "Crime Drama",
      "id": 2
    },
    {
      "title": "The Godfather Part II",
      "release": "1974",
      "rating": "9",
      "genre": "Crime Drama",
      "id": 3
    },
    {
      "title": "The Dark Knight",
      "release": "2008",
      "rating": "9",
      "genre": "Action",
      "id": 4
    },
    {
      "title": "Howl's Moving Castle ",
      "release": "2001",
      "rating": "9.5",
      "genre": "Animation",
      "id": 5
    }]
 

Ниже приведена моя текущая реализация метода map, но в результате есть дубликаты по жанру (две криминальные драмы)

Я пытаюсь отфильтровать дубликаты. Как мне это сделать?

 import useFetch from "./useFetch";

const MovieList = () => {
  const { data, isPending, error, setData } = useFetch(
    "http://localhost:8002/movies"
  );

return (
    <div className="movie-list">
      
      <div className="row">
        <div className="col-2">
          <ul className="list-group">
            <li className="list-group-item">All Genre</li>
            {data.map((item) => {
                return (
                  <li
                    key={item.id}
                    onClick={handleFilterGenre}
                    className="list-group-item"
                  >
                    {item.genre}
                  </li>
                );
              })}
          </ul>
        </div>

 

Любая помощь очень ценится! Спасибо

Попробуйте этот подход: (внешний массив, содержащий уже написанные жанры — для фильтрации)

 import useFetch from "./useFetch";

const MovieList = () => {
  const { data, isPending, error, setData } = useFetch(
    "http://localhost:8002/movies"
  );

const displayedGenres = [];

return (
    <div className="movie-list">
      
      <div className="row">
        <div className="col-2">
          <ul className="list-group">
            <li className="list-group-item">All Genre</li>
            {data.map((item) => {
                if (displayedGenres.includes(item.genre))
                   return;
                else {
                displayedGenres.push(item.genre);
                return (
                  <li
                    key={item.id}
                    onClick={handleFilterGenre}
                    className="list-group-item"
                  >
                    {item.genre}
                  </li>
                );
               }
              })}
          </ul>
        </div>
 

Извлеките то, что вам нужно, из ваших загруженных данных.

 const { data, isPending, error, setData } = useFetch('http://.../movies');
const genres = useMemo(() => data ? [...new Set(data.map(_ => _.genre))] : [] , [data]);


{genres.map(genre => (
  <li
    key={genre}
    onClick={() => filterGenre(genre)}
    className="list-group-item"
  >
    {genre}
  </li>
)}