无法更改在 moviedb-app 中不同类别之间单击的状态

Question

所以我想在我的 React 电影应用程序中的不同类别之间切换，例如 Trending、Top Rated、Popular etc.I 我为此使用了 useState 挂钩，通过将初始状态作为一个类别，然后通过 buttons.But 上的 onClick 事件更改状态，这似乎不是 working.What 可能的问题？

代码：

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 中使用它作为设置点击事件时该挂钩的状态。

Answer 1

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

请按如下方式更新您的依赖项数组。

更改类别时，fetchURL 值正在更改。所以需要包含在useEffect Hook的依赖数组中。

无法更改在 moviedb-app 中不同类别之间单击的状态

Not able to change the state on clicking between different categories in moviedb-app

javascript

reactjs

use-state