所以我试着建立一个主页到我的网站,这是包括一些类别的书籍,我试着从我的数据库中得到的书籍,并保存在状态和过滤他们中的每一个,并把他在正确的类别,但我得到了一些问题,当我试图做一个axios内部。
1.第一个问题是,如果我不把方括号[]放在最后的useEffect中,我就会进入无限循环
1.第二个问题是,如果我把方括号放在IG第一次useEffect工作时一切正常,我得到状态并将它们Map到Web上,但当我重新加载页面时,我得到一个空页面,这意味着状态值发生了一些事情
我在这里添加来自homePage组件的代码
我尝试以2种方式执行useEffect,但结果没有差异
import React, { useEffect, useState } from "react";
import axios from "axios"
import { useNavigate } from "react-router-dom";
import BookItem from "../bookItem/bookItem";
import './Home.css'
function HomePage() {
const [books, setBooks] = useState([])
const [comedyBooks, setComedy] = useState([])
const [sportBooks, setSport] = useState([])
const [actionBooks, setAction] = useState([])
let navigate = useNavigate();
//option 1
// useEffect(() => {
// axios.get('http://127.0.0.1:3000/books')
// .then(res => {
// setBooks(res.data.data.books)
// let comedyBook = []
// comedyBook = books.filter(el => el.categories == 'comedy')
// setComedy(comedyBook)
// let sportBook = []
// sportBook = books.filter(el => el.categories == 'sport')
// setSport(sportBook)
// let actionBook = []
// actionBook = books.filter(el => el.categories == 'action')
// setAction(actionBook)
// })
// }, [])
//option 2
useEffect(() => {
let comedyBook = []
let sportBook = []
let actionBook = []
console.log('ssss')
axios.get('http://127.0.0.1:3000/books')
.then(res => {
setBooks(res.data.data.books)
}).then(() => {
comedyBook = books.filter(el => el.categories == 'comedy')
sportBook = books.filter(el => el.categories == 'sport')
actionBook = books.filter(el => el.categories == 'action')
}).then(() => {
setComedy(comedyBook)
setSport(sportBook)
setAction(actionBook)
})
}, [])
return (
<div className="home-container">
<p className="title-cat">Comedy Books</p>
<div className="line-bottom"></div>
<div className="books">
{comedyBooks.map(item => {
return <BookItem key={item._id} item={item} />
})}
</div>
<p className="title-cat">Sport Books</p>
<div className="line-bottom"></div>
<div className="books">
{sportBooks.map(item => {
return <BookItem key={item._id} item={item} />
})}
</div>
<p className="title-cat">Action Books</p>
<div className="line-bottom"></div>
<div className="books">
{actionBooks.map(item => {
return <BookItem key={item._id} item={item} />
})}
</div>
</div>
)
}
export default HomePage
所以我得到了一些问题有一个问题使用setState里面使用效果?useEffect不工作后,重新加载页面?
1条答案
按热度按时间whhtz7ly1#
1.当更新useEffect内部的状态时,您需要将dependency array []作为useEffect函数中的第二个参数,否则您将像您所说的那样出现无限循环。在您的示例中,dependency array为空,这意味着useEffect函数将在页面第一次加载时仅运行一次。
1.对于问题的另一部分,当您更新useState中的数组时,您可以使用spread运算符...例如:
setBooks(books => [ ...books, res.data.data.books]);