[英]React Hook useEffect has missing dependencies: 'match.params.id' and 'match.params.type'. Either include them or remove the dependency array
Hey guys ı make movie app with movie database api.大家好,我用电影数据库 api 制作电影应用程序。 When route detail page ı am check the react router props match.params and fetching data with axios like that:当路由详细信息页面我检查反应路由器道具 match.params 并使用 axios 获取数据时:
Router路由器
<Route exact path="/:type/detail/:id" component={DetailPage} />
Example:例子:
http://localhost:3000/movie/detail/524434 http://localhost:3000/movie/detail/524434
http://localhost:3000/tv/detail/85552 http://localhost:3000/tv/detail/85552
I get this issue on terminal我在终端上遇到了这个问题
WARNING in src/Components/DetailPage.js
Line 17:8: React Hook useEffect has missing dependencies: 'match.params.id' and 'match.params.type'. Either include them or remove the dependency array react-hooks/exhaustive-deps
DetailPage.js DetailPage.js
const DetailPage = ({ match }) => {
const [detail, setDetail] = useState([]);
//Example api url
/* https://api.themoviedb.org/3/movie/${id}?api_key=b6a36190fedc206b2be58a35c9b08e95 */
/* https://api.themoviedb.org/3/tv/${id}?api_key=b6a36190fedc206b2be58a35c9b08e95 */
useEffect(() => {
axios
.get(`https://api.themoviedb.org/3/${match.params.type}/${match.params.id}?api_key=b6a36190fedc206b2be58a35c9b08e95`)
.then((response) => { setDetail(response.data); });
}, [])
const url = `https://image.tmdb.org/t/p/original/${detail.backdrop_path}`;
return (
<React.Fragment >
{detail ?
<div style={{ backgroundImage: `url("${url}")` }} className='background-image'>
<div className=" linear px-5 ">
<div className=" d-flex justify-content-center py-5 px-5">
<div className=" responsive text-white d-flex justify-content-center align-items-md-center align-items-xl-start flex-sm-column flex-lg-row px-5 ">
<div className=" poster-card card col-md-4" >
{detail.poster_path && <img src={`https://image.tmdb.org/t/p/w500/${detail.poster_path}`} alt="" className="card-image-top" />}
</div>
<div className="content col-md-8 ps-sm-5">
<h1>{detail.name ? detail.name : detail.title}</h1>
<div className="info d-flex mt-3">
<span className='me-3' >{detail.release_date} </span>
<ul className='d-flex list-unstyled flex-wrap' >{detail.genres && detail.genres.map((genres) => (<li key={genres.id} className='ms-2' > {genres.name} </li>))}</ul>
</div>
<div className="rate ">
<CircularProgressbar value={detail.vote_average * 10} text={`${detail.vote_average * 10}%`} styles={{ path: { stroke: '#21d07a', transition: 'stroke-dashoffset 0.5s ease 0s' }, text: { fill: '#ffff', fontSize: '25px' } }} />
</div>
<div className="mt-4">
<span className='fst-italic text-secondary h5' >{detail.tagline}</span>
</div>
<div className="overview mt-4">
{detail.overview && <h4>Overview</h4>}
{<p className='text-break' > {detail.overview}</p>}
</div>
</div>
</div>
</div>
</div>
</div>
: <div className="spinner-border" role="status"> <span className="visually-hidden">Loading...</span></div>
}
{detail.id && <Cast type={match.params.type} id={detail.id} />}
</React.Fragment>
)
};
export default DetailPage;
Console error:控制台错误:
Failed to load resource: the server responded with a status of 404 ()
undefined:1 GET https://image.tmdb.org/t/p/original/undefined 404
For check, clone my repository visit repository检查,克隆我的存储库访问存储库
detail variable is undefined on first render, so you may want to wait until it is populated to actually render your UI. detail 变量在第一次渲染时未定义,因此您可能需要等到它被填充后才能实际渲染您的 UI。 Also, you need to update the dependencies for useEffect.此外,您需要更新 useEffect 的依赖项。
import {useEffect, useState} from "react";
import axios from "axios";
const DetailPage = ({ match }) => {
const [detail, setDetail] = useState();
//Example api url
/* https://api.themoviedb.org/3/movie/${id}?api_key=b6a36190fedc206b2be58a35c9b08e95 */
/* https://api.themoviedb.org/3/tv/${id}?api_key=b6a36190fedc206b2be58a35c9b08e95 */
useEffect(() => {
axios
.get(`https://api.themoviedb.org/3/${match.params.type}/${match.params.id}?api_key=b6a36190fedc206b2be58a35c9b08e95`)
.then((response) => { setDetail(response.data); });
}, [match.params.id, match.params.type])
const url = `https://image.tmdb.org/t/p/original/${detail.backdrop_path}`;
if (!detail ) {
return null
}
return (
<React.Fragment >
{detail ?
<div style={{ backgroundImage: `url("${url}")` }} className='background-image'>
<div className=" linear px-5 ">
<div className=" d-flex justify-content-center py-5 px-5">
<div className=" responsive text-white d-flex justify-content-center align-items-md-center align-items-xl-start flex-sm-column flex-lg-row px-5 ">
<div className=" poster-card card col-md-4" >
{detail.poster_path && <img src={`https://image.tmdb.org/t/p/w500/${detail.poster_path}`} alt="" className="card-image-top" />}
</div>
<div className="content col-md-8 ps-sm-5">
<h1>{detail.name ? detail.name : detail.title}</h1>
<div className="info d-flex mt-3">
<span className='me-3' >{detail.release_date} </span>
<ul className='d-flex list-unstyled flex-wrap' >{detail.genres && detail.genres.map((genres) => (<li key={genres.id} className='ms-2' > {genres.name} </li>))}</ul>
</div>
<div className="rate ">
<CircularProgressbar value={detail.vote_average * 10} text={`${detail.vote_average * 10}%`} styles={{ path: { stroke: '#21d07a', transition: 'stroke-dashoffset 0.5s ease 0s' }, text: { fill: '#ffff', fontSize: '25px' } }} />
</div>
<div className="mt-4">
<span className='fst-italic text-secondary h5' >{detail.tagline}</span>
</div>
<div className="overview mt-4">
{detail.overview && <h4>Overview</h4>}
{<p className='text-break' > {detail.overview}</p>}
</div>
</div>
</div>
</div>
</div>
</div>
: <div className="spinner-border" role="status"> <span className="visually-hidden">Loading...</span></div>
}
{detail.id && <Cast type={match.params.type} id={detail.id} />}
</React.Fragment>
);
};
export default DetailPage;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.