用useEffect做下拉加載的坑勺远，dataSource增显，orgList 如果用useState聲明的話疗涉，useEffect第二個(gè)參數(shù)不傳dataSource易稠，orgList 進(jìn)去缸废，就會(huì)報(bào)一個(gè)警告

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

如果傳進(jìn)去依賴項(xiàng)，然后useEffect 里面又修改它驶社，導(dǎo)致變成死循環(huán)企量，所以我想到的用useRef()來創(chuàng)建dataSource，orgList做實(shí)現(xiàn)改變數(shù)據(jù)

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 ( 
            <div key={item.id} className='orgItem'>
                <img src={getImgUrl(item.orgImg)} alt=""/>
                <div className="itemCon">
                    <div style={{color:'#000'}}>{item.orgName}</div>
                    <div className="conTwo">{item.postalAddress}</div>
                    <div>{item.adoptName}</div>
                </div>
                <div className="arrow"></div>
            </div> 
        );
    };
    return (
        <div className="serviceOrg">
             <NavBar {...props} title="服務(wù)機(jī)構(gòu)" />
             <ActivityIndicator toast={true} text="加載中..." animating={refreshing} />
            <ListView 
                ref={lv}
                dataSource={dataSource.current}
                renderFooter={() => (<div style={{ padding: 10, textAlign: 'center' }}>
                {isLoading ? 'Loading...' : orgList.current.length>7 ? '哎呀衬吆，到底了' : '加載完成' }
                </div>)}
                renderRow={renderCard}
                style={{
                    height: lvHeight,
                    overflow: 'auto',
                    margin: '5px 0',
                }}
                pageSize={10}
                pullToRefresh={<PullToRefresh
                    refreshing={refreshing}
                    onRefresh={onRefresh}  //下拉刷新
                />}
                scrollRenderAheadDistance={500}  //當(dāng)一個(gè)行接近屏幕范圍多少像素之內(nèi)的時(shí)候梁钾，就開始渲染這一行
                onEndReached={onEndReached} //上拉加載
                onEndReachedThreshold={10} //調(diào)用onEndReached之前的臨界值，單位是像素
            /> 
        </div>
    )
}

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