因此，我想在我的 React Movie-App 中切换不同类别，例如 Trending 、 Top Rated 、 Popular 等。我为此使用了 useState 钩子，通过将初始状态设为一个类别，然后通过按钮上的 onClick 事件更改状态。但是它似乎不起作用。可能是什么问题？

代码：

App.js

import { useState } from "react";
import Movie from "./components/Movie";
import requests from "./components/ApiRequest";
import Navbar from "./components/Navbar";

function App() {
  const [category, setCategory] = useState('top_rated')
  
  return (
    <div className="App">
      <Navbar setCategory={setCategory} />
      <div className="movie-container">
        <Movie fetchUrl={"movie/" + category + "?api_key=" + API_KEY + "&language=en-US&page=1"} />
      </div> 
        
    </div>
  );
}

export default App;

Navbar.js

import React from 'react'
import SearchBar from './SearchBar'
import { FiFilter } from 'react-icons/fi'

const Navbar = ({ setCategory }) => {

    return (
        <div className="navbar-container">
            <button className="navbar-btn"><FiFilter />Filter</button>
            <div className="categories">
                <button className="cat-btn" onClick={() => setCategory("popular")}>Popular</button>
                <button className="cat-btn" onClick={() => setCategory("top_rated")}>Top Rated</button>
                <button className="cat-btn" onClick={() => setCategory("upcoming")}>Upcoming</button>
            </div>
            <SearchBar />
        </div>
    )   
}


export default Navbar

Movie.js

const Movie = ({ fetchUrl }) => {

    const [movie, setMovie] = useState([]);

    useEffect(() => {
        async function getPost() {
            const response = await client.get(fetchUrl);
            console.log(response);
            setMovie(response.data.results);
            // return response;
          }
          getPost();
    }, [])

    return (
    movie.map((m) => (
            <div className="movie-component" key={m.id}>    
                <img src={`https://image.tmdb.org/t/p/w500${m.backdrop_path}`} alt="" />
                <div className="metadata">
                    <h1>{m.title}</h1>
                    <a>⭐{m.vote_average}</a>
                </div>
                
            </div>
        )
))

}

因此，我已经在 App.js 中初始化了 useState 钩子，然后在 Navbar.js 中使用它来在点击事件上设置此钩子的状态。