React中自定义封装useState的诡异问题

把useState封装一层后，这里省略多余的代码

const usePreloadState = <T>(defaultState: T) => {
  const [data, setData] = useState<T>(defaultState);
  // ...省略一些逻辑
  // ...
  // ...

  return [data, setData];
};

export default usePreloadState;

把useState封装一层后导出，然后在其他地方使用

image.png
把鼠标放到setCurrentTab上时，居然多了一个枚举类型，导致后面把这个函数传给onChange时报错，
同时把鼠标放到currentTab上，也是一样的
image.png
currentTab明明是个值，居然会有setState的类型

原因

待调研

解决

给返回值定义类型即可，定义一个StateType

import { useEffect, useState, useRef, Dispatch, SetStateAction } from 'react';
type StateType<T> = [T, Dispatch<SetStateAction<T>>];

const usePreloadState = <T>(defaultState: T): StateType<T> => {
  const [data, setData] = useState<T>(defaultState);
  // ...省略一些逻辑

  return [data, setData];
};

export default usePreloadState;