React Hook “useReducer” 在 function “fetchData” 中被调用，它既不是 React function 组件也不是自定义 React Hook ZC1C425268E68385D1AB5074C17A9F

Question

i am trying to use the fetch data from fetchData hook but strangely it produces the following errors->

  Line 26:31:  React Hook "useReducer" is called in function "fetchData" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks
  Line 28:5:   React Hook "useEffect" is called in function "fetchData" which is neither a React function component or a custom React Hook function   react-hooks/rules-of-hooks

my fetchData.js files code ->

import { useReducer, useEffect } from "react"
import axios from 'axios'

const ACTION = {
    MAKE_REQUEST: 'make_request',
    GET_DATA: 'get_data',
    ERROR: 'error'
}

const BASE_URL = 'https://jobs.github.com/positions.json'

function reducer(state, action) {
    switch (action.type) {
        case ACTION.MAKE_REQUEST:
            return { loading: true, jobs: [] }
        case ACTION.GET_DATA:
            return { ...state, loading: false, jobs: action.payload.jobs }
        case ACTION.ERROR:
            return { ...state, loading: false, error: action.payload.error, jobs: [] }
        default:
            return state
    }
}

function fetchData(params, page) {
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true, error: false })

    useEffect(() => {
        dispatch(ACTION.MAKE_REQUEST)
        axios.get(BASE_URL, {
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTION.GET_DATA, payload: { jobs: res.data } })
        }).catch(e => {
            dispatch({ type: ACTION.ERROR, payload: { error: true } })
        })

    }, [params, page])

    return state

}

export default fetchData

my app.js file is simple. just fetching the api data from the fetchData hook and destructuring it. Then rendering it in the return ->

import React from 'react'
import { Container } from 'react-bootstrap'
import fetchData from './fetchData'

function App() {
    const { jobs, loading, error } = fetchData(null, 1)

    return (
        <Container>
            <div>{jobs.length}</div>
            {loading && <h1>loading</h1>}
            {error && <h1>error</h1>}
        </Container>
    )
}

export default App

Answer 1

You need to call your function useFetchData or something similar, as per React specs, use... are valid hook names.

This is described here :

Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.

And here :

It assumes that any function starting with ”use” and a capital letter right after it is a Hook.

Answer 2

Custom hooks should start with the keyword use as per https://reactjs.org/docs/hooks-rules.html .