问自定义钩子问题-无限依赖循环

EN

//
// Simple functional component
//

import React, { useEffect } from 'react'
import useItems from '/path/to/custom/hooks/useItems'

const ItemList = () => {
    const { items, loadItems } = useItems()

    // On load, use our custom hook to fire off an API call
    // NOTE: This is where the problem lies. Since in our hook (below)
    // we rely on `items` to set some params for our API, when items changes
    // `loadItems` will also change, firing off this `useEffect` call again.. and again :)
    useEffect(() => {
        loadItems()
    }, [loadItems])

    return (
        <ul>
            {items.map(item => <li>{item.text}</li>)}
        </ul>
    )
}

export default ItemList

//
// Simple custom hook
//

import { useState, useCallback } from 'react'

const useItems = () => {
    const [items, setItems] = useState([])

    // NOTE: Part two of where the problem comes into play. Since I'm using `items`
    // to grab the last item's id, I need to supply that as a dependency to the `loadItems`
    // call per linting (and React docs) instructions. But of course, I'm setting items in
    // this... so every time this is run it will also update.
    const loadItems = useCallback(() => {
        // Grab our last item
        const lastItem = items[items.length - 1]
        // Supply that item's id to our API so we can paginate
        const params = {
            itemsAfter: lastItem ? lastItem.id : nil
        }
        // Now hit our API and update our items
        return Api.fetchItems(params).then(response => setItems(response.data))
    }, [items])

    return { items, loadItems }
}

export default useItems