react hook +antd-mobile的下拉刷新上拉加载

用useEffect做下拉加载的坑，dataSource，orgList 如果用useState声明的话，useEffect第二个参数不传dataSource，orgList 进去，就会报一个警告

React Hook useEffect has a missing dependency: 'dataSource'. Either include it or remove the dependency array

如果传进去依赖项，然后useEffect 里面又修改它，导致变成死循环，所以我想到的用useRef()来创建dataSource，orgList做实现改变数据

import React,{useState,useEffect,useRef } from 'react'
import ReactDOM from 'react-dom';
import './index.less'
import NavBar from '@/NavBar'
import {ListView,PullToRefresh,ActivityIndicator  } from 'antd-mobile'
import {getOrgList} from '@api/oldList' 
import {connect} from 'react-redux'
import {getImgUrl} from '@utils/tool'
const App = (props) => {
    const [pageNum,setPageNum] = useState(1)
    // const [orgList,setOrgList] = useState([])
    const orgList = useRef([])
    const lv = useRef();
    const [lvHeight,setLvHeight] = useState(100);
    const [isLoading, setIsLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(true);
    const listDataSource  = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });
    // const [dataSource,setDataSource] = useState(listDataSource);
    const dataSource = useRef(listDataSource);
    useEffect(()=>{
        const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(lv.current).offsetTop;
        setLvHeight(hei)
    },[])
  const {id} = props.serveDetail
    useEffect(()=>{
        setIsLoading(true)
        setRefreshing(true)
       _getOrgList(id,pageNum)
    },[id,pageNum]) 
  const _getOrgList = (id,pageNum) => {
        getOrgList({areaID:43451,serviceID:id,pageNum}).then(res => {
            if(res.code === 0){
                if(res.data.list.length<1){
                    setIsLoading(false)
                    setRefreshing(false)
                    return 
                }
                if(pageNum === 1){
                    dataSource.current = dataSource.current.cloneWithRows(res.data.list)
                    orgList.current = res.data.list
                }else{
                    dataSource.current = dataSource.current.cloneWithRows([...orgList.current,...res.data.list])
                    orgList.current = [...orgList.current,...res.data.list]
                }
                setRefreshing(false)
                setIsLoading(false)
            }
        })
    }
    const onEndReached = () =>{
        setPageNum(pageNum+1)
    }
    const onRefresh =()=> {
       _getOrgList(id,1)
    }
    const renderCard = (item, sectionID, rowID) => {
        return ( 
            

                
                

                    
{item.orgName}
                    
{item.postalAddress}
                    
{item.adoptName}
                
                

            
 
        );
    };
    return (
        

             
             
             (

                {isLoading ? 'Loading...' : orgList.current.length>7 ? '哎呀，到底了' : '加载完成' }
                
)}
                renderRow={renderCard}
                style={{
                    height: lvHeight,
                    overflow: 'auto',
                    margin: '5px 0',
                }}
                pageSize={10}
                pullToRefresh={}
                scrollRenderAheadDistance={500}  //当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行
                onEndReached={onEndReached} //上拉加载
                onEndReachedThreshold={10} //调用onEndReached之前的临界值，单位是像素
            /> 
        
    )
}

export default connect(state=>({
    serveDetail: state.serveDetail,
}))(App)