Question

React hook 中的 Axios 实例“无法读取未定义的属性‘get’”

2021-01-11

1178

javascript reactjs axios react-hooks

axios 实例在渲染时尚未准备好，因为我收到错误“无法读取未定义的属性‘get’”，但分支已加载，因此显然下一次尝试成功。

hooks.js 中的 axios 实例：

import {useState, useEffect} from 'react';
import axios from 'axios';
import {useKeycloak} from '@react-keycloak/web';
import {BASE_URL} from '../constants.js';

export const useAxios = () => {
    const {keycloak, initialized} = useKeycloak();
    const [axiosInstance, setAxiosInstance] = useState({});

    useEffect(() => {
        const instance = axios.create({
            baseURL: BASE_URL,
            headers: {
                Authorization: initialized ? `Bearer ${keycloak.token}` : undefined,
            },
        });

        setAxiosInstance({instance});

        return () => {
            setAxiosInstance({});
        }
    }, [keycloak, initialized, keycloak.token]);

    return axiosInstance.instance;
};

错误发生在“注册”组件中：

import {useAxios} from "../utilities/hooks";

const Registration = () => {
    const {initialized} = useKeycloak();
    const axiosInstance = useAxios();
    const [branches, setBranches] = useState({});

    const loadBranches = useCallback(async () => {
        try {
            const response = await axiosInstance.get('/branch');
            setBranches(response.data);
        } catch (error) {
            console.log(`Error when loading branches: ${error.message}`, error);
        }
    }, [axiosInstance]);

    useEffect(() => {
        loadBranches();
    }, [loadBranches]);

...

我首先使用类似的 fetch 函数时没有出现错误，因此似乎 axios 实例（已导入）是罪魁祸首。我也发现有点奇怪，我无法做到这一点：

    useEffect(() => {
        loadBranches();
    }, []);

然后我得到 React Hook useEffect 缺少依赖项：“loadBranches”。将其包含或删除依赖项数组 react-hooks/exhaustive-deps overrideMethod @ react_devtools_backend.js:2430 printWarnings @ webpackHotDevClient.js:138 handleWarnings @ webpackHotDevClient.js:143 push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210

使用 fetch... 时情况并非如此，并且为了模拟“安装时”，您通常会使用 []。

如何确保 axiosInstance 在安装时存在？

Answer 1

您可以使其更简单：

const Registration = () => {
    const axiosInstance = useAxios();
    const [branches, setBranches] = useState({});

    const loadBranches = useCallback(async () => {
        try {
              const response = await axiosInstance.get('/branch');
              setBranches(response.data);
        } catch (error) {
            console.log(`Error when loading branches: ${error.message}`, error);
        }
    }, [axiosInstance]);

    useEffect(() => {
           axiosInstance && loadBranches(); // <== here
    }, [loadBranches, axiosInstance]);

仅在定义 axiosInstance 时才会调用 loadBranches 函数。

Answer 2

您需要让它等到 axiosInstance 被定义，例如如下：

const Registration = () => {
    const axiosInstance = useAxios();
    const [branches, setBranches] = useState({});
    const [axiosReady, setAxiosReady] = useState(false);

    const loadBranches = useCallback(async () => {
        try {
            if (axiosReady) {
                const response = await axiosInstance.get('/branch');
                setBranches(response.data);
            }
        } catch (error) {
            console.log(`Error when loading branches: ${error.message}`, error);
        }
    }, [axiosReady, axiosInstance]);

    useEffect(() => {
        if (axiosInstance) {
            setAxiosReady(true);
        }
    }, [axiosInstance]);

    useEffect(() => {
            loadBranches();
        }, [loadBranches]
    );

...

该组件现在可以正常加载并且没有错误，并且正确触发 axios。