Reactjs 反应效果挂钩导致无限循环

一旦页面、用户数据或类别发生更改，usePaginator打算获取数据（如果有更多数据要获取，则设置hasNextPage），但它会导致无限循环，据称这是由于方法中出现的setInfo造成的，然后在useEffect钩子中调用该方法。UI没有响应，尽管存在一系列依赖项，但问题是如何解决这个问题？我在寻找你们的回应，伙计们

ScrollableList.js

import React, { useRef, useContext, useEffect, useState } from 'react'
import { UserDataContext } from '../../utils/contexts'
import Followers from './Followers'
import Following from './Following'
import IncomingReqs from './IncomingReqs'
import SentReqs from './SentReqs'
import usePaginator from '../../hooks/Profile/usePagination'


export default ({ category, userId }) => {
  const UserData = _ => useContext(UserDataContext)

  const [ page, setPage ] = useState(1)
  const [ loading, setLoading ] = useState(false)

  const userData = useRef(UserData())

  const [ hasNextPage, setHasNextPage, info ] = usePaginator(category, {
    'Followers' : UserData().followers,
    'Following' : UserData().following,
    'Sent Requests' : UserData().requestsTo !== undefined ? UserData().requestsTo : null,
    'Incoming Requests' : UserData().requestsFrom !== undefined ? UserData().requestsFrom : null
  }, userId, page, val => setPage(val), val => setLoading(val))

  useEffect(_ => {
    document.getElementById('scrollableList').addEventListener('scroll', definePosition)
    return _ => document.getElementById('scrollableList').removeEventListener('scroll', definePosition)
  })

  const definePosition = e => {
    if(e.target.scrollHeight === Math.floor(e.target.offsetHeight + e.target.scrollTop + 1) && hasNextPage){
      setPage(page + 1)
      setHasNextPage(false)
    }
  }

  return(
    <div id="scrollableList">
      { category === 'Followers' && <Followers followersCount={userData.current.followers} data={info}/> }
      { category === 'Following' && <Following followingCount={userData.current.following} data={info}/> }
      { category === 'Incoming Requests' && <IncomingReqs incomingReqCount={userData.current.requestsFrom} data={info}/> }
      { category === 'Sent Requests'  && <SentReqs sentReqCount={userData.current.requestsTo} data={info}/> }
    </div>
  )
}

import React，{useRef，useContext，useffect，useState}来自“React”
从“../../utils/contexts”导入{UserDataContext}
从“./Followers”导入关注者
从“./Following”导入以下内容
从“./IncomingReqs”导入IncomingReqs
从“/SentReqs”导入SentReqs
从“../../hooks/Profile/usePagination”导入usePaginator
导出默认值（{category，userId}）=>{
const UserData=\u=>useContext（UserDataContext）
const[page，setPage]=useState（1）
常量[loading，setLoading]=useState（false）
const userData=useRef（userData（））
常量[hasNextPage，setHasNextPage，info]=usePaginator（类别{
“Followers”：UserData（）.Followers，
“Following”：UserData（）。Following，
“已发送请求”：UserData（）.requestsTo！==未定义？UserData（）.requestsTo:null，
“传入请求”：UserData（）.requestsFrom！==未定义？UserData（）.requestsFrom:null
}，userId，page，val=>setPage（val），val=>setload（val））
useEffect（=>{
document.getElementById（'scrollableList'）。addEventListener（'scroll'，definePosition）
return=>document.getElementById（'scrollableList'）。removeEventListener（'scroll'，definePosition）
})
常数定义位置=e=>{
if（e.target.scrollHeight==数学地板（e.target.offsetHeight+e.target.scrollTop+1）&&hasNextPage）{
设置页面（第+1页）
setHasNextPage（错误）
}
}
返回(
{category==='Followers'&&}
{category==='Following'&&}
{category==='传入请求'&&}
{category==='Sent Requests'&&}
)
}

usePagination.js

import { useState, useEffect } from 'react'
import fetchRequests from '../../api/profile/stats/fetch-requests'
//import fetchFollowers from '../../api/profile/stats/fetch-followers-following'


export default (category, userData, userId, page, setPage) => {
  const [ hasNextPage, setHasNextPage ] = useState(false)
  const [ _userData, setUserData ] = useState(userData)
  const [ info, setInfo ] = useState([])

  useEffect(_ => {
    setUserData(userData)
  }, [ userData ])

  useEffect(_ => {
    setPage(1)
    if(_userData[ category ] > 100) setHasNextPage(true)
    // eslint-disable-next-line
  }, [ category ])

  const loadInfo = _ => {
    if(userData[category] > 0){
      if(category === 'Sent Requests'){
        return fetchRequests(page, false)
          .then(res => {
            setInfo([...info, ...res])
            if(info.length + res.length < userData[category])
              setHasNextPage(true)
          })
      }
    }
  }

  useEffect(_ => {
    loadInfo()
  }, [ page, userData, category ])

  return [ hasNextPage, setHasNextPage, info ]
}

从'react'导入{useState，useffect}
从“../api/profile/stats/fetch requests”导入fetchRequests
//从“../api/profile/stats/fetch followers following”导入fetchFollowers
导出默认值（类别、用户数据、用户ID、页面、设置页面）=>{
常量[hasNextPage，setHasNextPage]=useState（false）
const[_userData，setUserData]=useState（userData）
const[info，setInfo]=useState（[]
useEffect（=>{
setUserData（用户数据）
}，[userData]）
useEffect（=>{
设置页（1）
如果（_userData[category]>100）设置下一页（true）
//eslint禁用下一行
}，[类别]）
const loadInfo=\\u=>{
如果（用户数据[类别]>0）{
如果（类别==‘已发送请求’）{
返回请求（第页，false）
。然后（res=>{
setInfo（[…info，…res]）
if（info.length+res.length{
loadInfo（）
}，[页面，用户数据，类别]）
返回[hasNextPage，setHasNextPage，info]
}

SentReqs.js

import React from 'react'


export default ({ sentReqCount, data }) => {
  return(
    <>
      { sentReqCount === 0 && <p>You have not sent any requests yet, when you will, you will see them here</p> }
    </>
  )
}

从“React”导入React
导出默认值（{sentReqCount，data}）=>{
返回(
{sentReqCount===0&&您尚未发送任何请求，当您发送请求时，您将在此处看到它们
}
)
}

不是问题的原因，而是什么是

const UserData=\u=>useContext（UserDataContext）

useContext

hook应该在函数体中。在ScrollableList.js中，scroll listener的useEffect没有依赖项数组。你应该设置它。将

definePosition

的定义移动到useEffect中将

loadInfo

的函数体直接移动到useEffect中。删除

\u userData

并仅使用

userData

，看不到本地状态的优势。卸下eslint禁用并修复deps阵列