Axios 成为承诺

Question

以下代码中 api 和 axios 变量的 console.log 输出是不同的，即使我没有更改任何内容。 api 是普通的 axios 但状态 axios 变成了 Promise。

import {createContext, useEffect, useState} from "react";
import api from "axios";


export const AxiosContext = createContext({
  axios: null
})

export const AxiosContextProvider = ({ children }) => {
  const [axios, setAxios] = useState(api);
  
  console.log(api); // this is axios
  console.log(axios); // this is a Promise

  return(
    <AxiosContext.Provider value={{ axios }}>
      {children}
    </AxiosContext.Provider>
  )
}

为什么会出现这种情况？我该如何解决这个问题？

Answer 1

这是由 React 将

axios

解释为 函数 造成的。来自 useState 文档...

如果您将函数作为

initialState

传递，它将被视为 initializer 函数。它应该是纯的，不应该接受任何参数，并且应该返回任何类型的值。 React 将在初始化组件时调用您的初始化函数，并将其返回值存储为初始状态。

绝对没有理由将 Axios 实例存储为状态；它不需要对变化做出反应。

我什至会说没有理由提供它作为上下文。如果必须，只需创建一个 Axios 实例并将其提供为上下文值

import axios from 'axios';

const api = axios.create({ /* ... */ });

export const AxiosContextProvider = ({ children }) => {
  return(
    <AxiosContext.Provider value={{ axios: api }}>
      {children}
    </AxiosContext.Provider>
  );
}

否则，只需在模块中创建一个 Axios 实例并在需要时导入它

// services/api.js

import axios from 'axios';

export default axios.create({ /* ... */ });

// some other component
import api from './path/to/services/api';