我正在学习编程，因为几个月，我开始练习一些项目，我可以自己创建或我可以在互联网上找到研究和学习更多关于不同的主题。在这种情况下，我正在与React.js，材料UI和电影数据库试图使某种网站有关的电影和系列。我做得很好，直到我需要在页面上显示所有的流派并过滤它们。
我的目的是显示电影数据库中的所有类型，并在需要时过滤它们。在某些情况下，这段代码工作正常，没有任何问题，但一般来说，它说“genres.map不是一个函数”，组件不呈现。我知道这种类型的错误通常发生在我试图Map不是数组的东西时。但是，在这里genres是一个数组。2最让我恼火的是在一些罕见的情况下代码工作正常。3就像我之前说的，我是新的相对较新的编程，这是我的第一个问题在这里，所以我道歉，如果这不是地方问这个。如果有人能帮我解决这个问题，我将非常感激，最重要的是要了解什么是问题。

import { Chip } from "@mui/material";
import axios from "axios";
import React, { useEffect } from "react";

const Genres = ({
  selectedGenres,
  setSelectedGenres,
  genres,
  setGenres,
  type,
  setPage,
}) => {

  const addGenre = (genre) => {
    setSelectedGenres([...selectedGenres, genre]);
    setGenres(genres.filter((g) => g.id !== genre.id));
    setPage(1);
  };

  const removeGenre = (genre) => {
    setSelectedGenres(
      selectedGenres.filter((selected) => selected.id !== genre.id)
    );
    setGenres([...genres, genre]);
    setPage(1);
  };

  const fetchGenres = async () => {
    const { data } = await axios.get(
      `https://api.themoviedb.org/3/genre/${type}/list?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
    );
    setGenres(data.genres);
  };

  useEffect(() => {
    fetchGenres();

    return () => {
      setGenres({});
    };
    // eslint-disable-next-line
  }, []);

  console.log(genres);

  return (
    <div style={{ padding: "6px 0" }}>
      {selectedGenres.map((genre) => (
          <Chip
            label={genre.name}
            style={{ margin: 2 }}
            size="small"
            key={genre.id}
            clickable
            onDelete={() => removeGenre(genre)}
          />
        ))}
      {genres.map((genre) => (
          <Chip
            label={genre.name}
            style={{ margin: 2 }}
            size="small"
            key={genre.id}
            clickable
            onClick={() => addGenre(genre)}
          />
        ))}
    </div>
  );
};

export default Genres;