问在下一个JS中实现加载更多按钮

EN

import useSWR, { useSWRPages } from 'swr'
import axios from 'axios'
import { useState } from 'react'
//... other dependencies import

export default function Locations({...props}) {

    const [loading,setLoading] = useState(true)
    const [dataCount, setDataCount] = useState(3);
     const [pageIndex, setPageIndex] = useState(1)    

    const locationsFetcher = async() => {
        let response = await axios( process.env.url + '?page=${pageIndex}&limit=${dataCount}', headers:{})
        setLoading(false)
        let data = await response.data.results
        return data;
    }

    const {data, error} = useSWR('locations', locationsFetcher,{
        onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
            if (error.status === 404) return
            if (retryCount >= 10) return
            
            setTimeout(() => revalidate({ retryCount }), 5000)
        }
    })

    const loadMore = () => {
        console.log("count " + dataCount +  " pageIndex " + pageIndex)
        setDataCount(dataCount + 3)
        setPageIndex(pageIndex + 1)
    }


    return (
        <>
            <table>
                {error && <tr><td><p>Error in Loading Data. </p></td></tr>}
                {(loading) ? <tr><td colSpan="6"><p>Loading ...</p></td></tr> : 
                (data && data.length > 0) ? (data.map((location, index) => (
                    <tr index={index} key={index}>
                        <td>{location.name}</td>
                         ...
                  
                        <td>{location.phone}</td>
                        </tr>
                ))) : (<tr><td><NoDataFound  /></td></tr>)}
                </table>
                <div className="click_btn">
                    <button onClick={() => loadMore()}>
                        <span>Expande Table</span>
                    </button>
                </div>
        </>


}