从api异步方式获取数据时，响应函数组件被调用3次

Question

我是新手，不明白为什么在从GithubAPI获取数据时，下面的函数组件会被调用3次

useFetchJobs.js

下面的文件调用github作业api并获取数据

这里我有console.log（state.jobs）；它显示了3个输出，即

>

未定义

(50) { }

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

const ACTIONS = {
    MAKE_REQUEST: 'make-request',
    GET_DATA: 'get-data',
    ERROR: 'error',
}

const proxyurl = "https://cors-anywhere.herokuapp.com/";

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

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


export default function useFetchJobs(params, page) {
    //hook
    const [state, dispatch] = useReducer(reducer, { jobs: [], loading: true })

    //hook
    useEffect(() => {
        const cancelToken = axios.CancelToken.source();

        dispatch({ type: ACTIONS.MAKE_REQUEST })

        axios.get(proxyurl + BASE_URL, {
            cancelToken: cancelToken.token,
            params: { markdown: true, page: page, ...params }
        }).then(res => {
            dispatch({ type: ACTIONS.GET_DATA, payload: { jobs: res.data } })
        }).catch(e => {
            if (axios.isCancel(e)) return
            dispatch({ type: ACTIONS.ERROR, payload: { error: e } })
        })

        return () => {
            cancelToken.cancel();
        }

    }, [params, page])

    console.log(state.jobs);

    return state;
}

APP.js

下面的文件从功能组件返回数据，检查其长度并输出到屏幕

import React from 'react';
import { Container } from 'react-bootstrap';

import useFetchJobs from './useFetchJobs.js';

function App() {

  const { jobs, loading, error } = useFetchJobs();


  return (
    <Container>
      {loading && <h1>Loading...</h1>}
      {error && <h1>Error - Reload Again</h1>}
      <h1>{jobs ? '' : '50'}</h1>
    </Container>
  )

}

export default App;

我看到3个针对console.log（state.jobs）的输出 useFetchJobs.js文件内部




Answer 1

>

未定义-

(50) { } -