Question

usePaginator用于获取数据（如果有更多数据要获取，则设置hasNextPage），一旦页面，userData或类别更改，但据称由于setInfo出现了无限循环，该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>
  )
}

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 ]
}

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> }
    </>
  )
}

反应useEffect钩子导致无限循环

0 个答案: