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>>是设置函数

TypesScript中的React自定义钩子导致类型错误

1 个答案: