Javascript 如何修复React'；即使有空括号，s也会使用effect无限循环？

我昨天遇到了这个问题，它起作用了，但在我对按钮实现onClick事件以打开一个新的自定义窗口之后。从那一刻起，我的应用程序进入无限循环

我尝试了console.log（），它显示了对API的无限数量的请求。 更准确地说，在我进入仪表板页面之前，每个API调用都有效

我使用ContextAPI进行状态管理。以下是代码：

ContextAPI酒店：

const [hotelData, setHotelData] = useState({
        data: {},
        loaded: false,
        reviewData: {},
        reviewsLoaded: false,
        detailData: {},
        detailLoaded: false,
    })

    const getHotelsData = () => {
        const token = localStorage.getItem('token')
        axios.get(`${HOTEL_DATA}`, {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then((res) => {
                const { data } = res
                setHotelData((previousData) => ({ ...previousData, data, loaded: true }))
            })
            .catch((error) => {
                if (error.response) console.error(error)
                if (error.request) console.error(error)
            })
    }

Dashboard.js：

const { hotelData, getHotelsData, getSpecifiedReviews, getSpecifiedHotelDetails } = useContext(HotelContext)
    const { data, loaded, reviewData, reviewsLoaded, detailData, detailLoaded } = hotelData || {}

    const { loggedIn } = loginUser || {}

    useEffect(() => {
        getHotelsData()
    }, [])


    return (
        <main className="dashboard-wrap">
            <section className="heading-box">
                <h1 className="heading">Hotels</h1>
            </section>
            {/* Fetching data if it is loaded. */}
            {!loaded ? <FontAwesomeIcon className="spinner" icon={faSpinner} /> : <section className="data-box">{data.map((item) => (
                <section className="data">
                    <h1 className="data-name">{item.name}</h1>
                    <section className="data-location">
                        <h2 className="data-city">{item.city},</h2>
                        <h2 className="data-country">{item.country}</h2>
                    </section>
                    <section className="stars-box">
                        <p>{Array(item.stars).fill(<FontAwesomeIcon icon={faStar} />)}</p>
                    </section>
                    <section className="image-box">
                        <img className="data-image" src={item.image} alt={`Hotel: ${item.id}`} height="500" width="800" />
                    </section>
                    <section className="date-time-box">
                        <Moment format={'dddd / MMMM / YYYY'}>{item.date}</Moment>
                    </section>
                    {getSpecifiedHotelDetails(item.id)}
                    <section className="description-box">
                        {/* <p className="data-description">{item.description} <button className="description-details" onClick={windowOpen}>More details</button></p> */}
                    </section>
                    <section className="review-box">
                        <button onClick={() => getSpecifiedReviews(item.id)} className="review-btn">
                            Show Reviews
                        </button>
                        {
                            reviewsLoaded ? <div>{reviewData.map((reviewItem) => (
                                <div>{reviewItem.id === item.id ? (
                                    <div>{reviewItem.message}</div>
                                ) : null}</div>
                            ))}</div> : null
                        }
                    </section>
                </section>
            ))}</section>}
        </main>
    )

const{hotelData，getHotelsData，getSpecifiedReviews，getSpecifiedHotelDetails}=useContext（HotelContext）
const{data，loaded，reviewData，ReviewLoaded，detailData，detailLoaded}=hotelData | |{
常量{loggedIn}=loginUser | |{}
useffect（（）=>{
getHotelsData（）
}, [])
返回(
旅馆
{/*正在获取加载的数据。*/}
{！已加载？：{data.map（（项）=>(
{item.name}
{item.city}，
{项目.国家}
{Array（item.stars）.fill（）}

{item.date}
{getSpecifiedHotelDetails（item.id）}
{/*
{item.description}更多详细信息
*/}
getSpecifiedReviews（item.id）}className=“review btn”>
展示评论
{
ReviewLoaded？{reviewData.map（（reviewItem）=>(
{reviewItem.id==item.id(
{reviewItem.message}
)：null}
))}：null
}
))}}
)

windowOpen的代码在哪里？@jmargolisvt似乎不相关，它被注释掉了。根据数据，父级是否有可能安装/卸载组件？UseEffect使用正确，我认为组件正在重新招标。如果警报被多次调用，即使传递了空数组，也要将其置于useffect中，然后每次重新安装组件都可能是您内联的getSpecificdetails方法的bcuz