所以我想在不同類別之間進行切換我反應過來的電影，應用程式，例如Trending，Top Rated，Popularetc.I上午使用useState掛鉤這一點，通過使初始狀態為一類，然后通過onClick事件改變對buttons.But它的狀態似乎不起作用。可能是什么問題？
代碼：
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 中使用它作為點擊事件時設定這個鉤子的狀態。
uj5u.com熱心網友回復：
useEffect(() => {
async function getPost() {
const response = await client.get(fetchUrl);
console.log(response);
setMovie(response.data.results);
// return response;
}
getPost();
}, [fetchURL])
請按如下方式更新您的依賴項陣列。
在更改類別時，fetchURL 值正在更改。所以它需要包含在 useEffect Hook 的依賴陣列中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/363936.html
標籤：javascript 反应 使用状态
上一篇：我想制作一個js函式，它從div中取出每個元素并為其激活一個CSS塊
下一篇：打字稿中的未知資料型別