所以我试着建立一个主页到我的网站，这是包括一些类别的书籍，我试着从我的数据库中得到的书籍，并保存在状态和过滤他们中的每一个，并把他在正确的类别，但我得到了一些问题，当我试图做一个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不工作后，重新加载页面？