在 TypesScript 中使用 React 自定义钩子键入错误

Question

我正在尝试编写一个自定义钩子以通过API提供初始状态。钩子应该像useState一样，返回state值和setState函数。我对 TypeScript 还是有点陌生，我几乎尝试了我能想到的所有变体，但编译器总是特别抱怨我的setState函数。

function useRequest<A>(
url: string,
createErrMsg: (e: string) => string
): [A | null, SetStateAction<A | null>] {
const [data, setData] = useState(null);
useEffect(() => {
axios
.get(url)
.then(res => res.data)
.then(setData)
.catch(e => setErrors(createErrMsg(e)));
}, [url, createErrMsg]);
return [data, setData];
}

问题显然源于我将null指定为钩子内的初始状态。当我尝试编译时，我收到一个错误，其最后一行相关行是Type 'A' is not assignable to type '(prevState: null) => null'.ts(2322)如何重写我的类型(或函数(，以便此 null 不会引起我的头痛？

Answer 1

将自定义钩子返回类型更改为此

[A | null, Dispatch<SetStateAction<A | null>>]

---

解释：

SetStateAction是useEffect的类型

看：

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

其中S是状态的类型，Dispatch<SetStateAction<S>>用于设置函数