Reactjs 调用setState（）将执行函数值，而不是传递它

我有以下代码。按下按钮时，预期的行为是重新创建

AxiosInstance

，并更新状态。但实际上，实例是重新创建的，然后在某个地方执行

函数createApi（）：AxiosInstance{
const api=axios.create（）；
// ...
返回api；
}
函数App（）{
const[api，setApi]=React.useState（（）=>createApi（））；
常量重置API=（）=>{
setApi（createApi（））；
};
控制台日志（api）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
重置API
);
}

Typescript中没有错误，

setApi

在我的IDE中具有以下签名：

React.Dispatch

评估结果如下：

（值：AxiosInstance）=>无效

---

这正是我在第一个代码片段中所做的，那么为什么它不起作用呢？

好吧，显然Typescript欺骗了我，它不是那么简单<代码>AxiosInstance具有以下签名：

导出接口AxiosInstance{
（配置：AxiosRequestConfig）：AxiosPromise；
（url:string，config？：AxiosRequestConfig）：AxiosPromise；
...
}

因此

AxiosInstance

是一个

函数

，

useState

在引擎盖下使用

useReducer

，在挖掘ReactJS代码库后，我发现

useReducer

中使用的分派函数只需简单检查接收的值是否是一个通用函数

函数BasicStateEducer（状态：S，操作：BasicStateAction）：S{
返回操作类型===“函数”？操作（状态）：操作；
}

因此，由于回调函数本身是函数，因此分派错误地将其作为回调函数，并直接执行

修复非常简单，通过回调返回实例，而不是直接传入

setState

setApi（（）=>createApi（））

实例