当我添加依赖项 html, body {
background-color: black;
color: white;
height: 100%;
min-height: 100%;
}
#h-100{
/*height: 100%;
min-height: 100%;*/
/*padding-top: 30%;
padding-bottom: 30%;*/
text-align: center;
}
.introduction {
background-image: url("beat-saber-intro.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.row{
padding-bottom: 10%;
}
.sketchfab-embed-wrapper{
height: 100%;
margin-bottom: 200px;
}
iframe{
height: 100%;
width: 100%;
}
header {
height: 100%;
min-height: 100%;
}
.center{
text-align: center;
}
/* Menu*/
.img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
#colorlib-main-nav {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.99);
z-index: 1002;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform: scale(0.1);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
overflow-y: scroll; }
#colorlib-main-nav .colorlib-table {
display: table;
width: 100%;
height: 100%; }
#colorlib-main-nav .colorlib-table .img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 1; }
#colorlib-main-nav .colorlib-table .img:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: rgba(0, 0, 0, 0.3); }
#colorlib-main-nav .colorlib-table .colorlib-table-cell {
display: table-cell;
vertical-align: middle; }
#colorlib-main-nav .colorlib-nav-toggle {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
height: 44px;
width: 44px;
line-height: 0;
padding: 0 !important;
visibility: hidden;
opacity: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
@media (prefers-reduced-motion: reduce) {
#colorlib-main-nav .colorlib-nav-toggle {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
#colorlib-main-nav .colorlib-nav-toggle i {
top: 18px !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
text-indent: 0; }
#colorlib-main-nav .colorlib-nav-toggle.show {
visibility: visible;
opacity: 1; }
#colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
content: '';
width: 40px;
height: 2px;
background: #fff;
position: absolute;
left: 0; }
.menu-show #colorlib-main-nav {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
#colorlib-main-nav .logo {
font-size: 40px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif; }
#colorlib-main-nav .logo span {
font-size: 14px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 8px; }
#colorlib-main-nav ul {
padding: 0;
margin: 0;
display: block; }
@media (max-width: 767.98px) {
#colorlib-main-nav ul {
padding: 20px 0 0 0; } }
#colorlib-main-nav ul li {
padding: 0;
margin: 0;
list-style: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase; }
#colorlib-main-nav ul li a {
display: block;
color: white;
padding: 5px 0; }
#colorlib-main-nav ul li a span {
color: white;
position: relative;
padding: 0 10px; }
#colorlib-main-nav ul li a span small {
position: absolute;
bottom: 7px;
left: -30px;
font-size: 16px;
color: rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
outline: none;
text-decoration: none; }
#colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
#colorlib-main-nav ul li.active a span {
color: #f8b500; }
#colorlib-main-nav ul li.active a span:before {
background: #fec771;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1); }
header {
padding: 2em 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 9;
margin: 0 auto; }
@media (max-width: 767.98px) {
header {
padding: 1em 0;
position: absolute; } }
header .colorlib-navbar-brand {
float: left; }
header .colorlib-navbar-brand .colorlib-logo {
font-size: 12px;
color: #fff;
letter-spacing: 5px;
font-weight: 600;
position: relative;
display: inline-block;
margin-bottom: 0;
line-height: 1.5;
font-family: "Poppins", Arial, sans-serif;
text-transform: uppercase; }
header .colorlib-navbar-brand .colorlib-logo span {
font-size: 11px;
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 7px; }
header .colorlib-navbar-brand .colorlib-logo i {
color: #fec771;
position: absolute;
top: -18px;
bottom: 0;
left: 7px;
font-size: 48px; }
header .colorlib-navbar-brand .colorlib-logo:hover {
text-decoration: none !important; }
header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
outline: none;
text-decoration: none; }
.colorlib-nav-toggle {
cursor: pointer;
text-decoration: none; }
.colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
background: #000; }
.colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
background: #000; }
.colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
outline: none;
border-bottom: none !important; }
.colorlib-nav-toggle i {
position: relative;
display: inline-block;
width: 20px;
height: 2px;
color: #000;
font: bold 14px/.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.menu-show .colorlib-nav-toggle i {
background: #fff;
color: #fff; }
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
content: '';
width: 30px;
height: 2px;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
.menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
background: #fff; }
@media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle.dark i {
position: relative;
color: #fff;
background: #fff;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out; }
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
background: #fff;
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s; }
@media (prefers-reduced-motion: reduce) {
.colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
-webkit-transition: none;
-o-transition: none;
transition: none; } }
.colorlib-nav-toggle i::before {
top: -7px; }
.colorlib-nav-toggle i::after {
bottom: -7px; }
.colorlib-nav-toggle:hover i::before {
top: -10px; }
.colorlib-nav-toggle:hover i::after {
bottom: -10px; }
.colorlib-nav-toggle.active i {
background: transparent; }
.colorlib-nav-toggle.active i::before {
top: 0;
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
.colorlib-nav-toggle.active i::after {
bottom: 0;
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
-o-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
.colorlib-nav-toggle {
float: right;
z-index: 1003;
position: relative;
top: 0;
right: 0;
display: block;
margin: 0 auto;
cursor: pointer;
margin-top: 0; }
@media (max-width: 767.98px) {
.colorlib-nav-toggle {
right: 10px; } }
.hero-wrap {
background: #202020; }
.hero-wrap .slider-text .desc h1 {
font-size: 6vw;
font-weight: 700;
color: #fff;
text-transform: uppercase; }
.hero-wrap .slider-text .desc h3 {
color: rgba(255, 255, 255, 0.8);
font-size: 18px; }
时，我的应用程序变成了一个无限循环。
我做错了什么？
React Hook useEffect 缺少依赖项：'fetchData'。要么包含它要么删除依赖数组
fetchData答案 0 :(得分：0)
我会将 fetchData 的内容放入 useEffect 中。
const [films, setFilms] = useState([]);
const [page, setPage] = useState(1);
const [isLoad, setIsLoad] = useState(false);
const incrementPage = () => {
setPage(page + 1);
};
useEffect(() => {
setIsLoad(true);
const response = await fetch(
`${baseURL}movie/popular?api_key=${API_KEY}&language=en-US&page=${page}`
).then((res) => res.json());
setFilms([...films, ...response.results]);
setIsLoad(false);
incrementPage();
}, [setIsLoad, page, setFilms, setIsLoad, incrementPage]);
如果'page'发生变化，它会自动获取新数据。