类型"调度<hook>"不能分配给类型"() => void"

Question

我试着浏览类似的问题和文章，但似乎什么都不起作用。我也有点不知道这个错误意味着什么，因为我试图设置一个值，并试图声明一个类型，但都不起作用。

import React, { createContext, SetStateAction, useState } from 'react';
export const MenuContext = createContext({
open: false,
setOpen: () => {},
});
export default function MenuManager(props:any) {
const [open, setOpen] = useState(false);
return (
<MenuContext.Provider value={{ open, setOpen }}>
{props.children}
</MenuContext.Provider>
);
}

错误是返回

Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '() => void'.

Answer 1

为MenuContext声明一个接口，并正确键入上下文和setOpen状态更新器函数。

示例：

import React, { createContext, SetStateAction, useState, Dispatch } from 'react';
interface IMenuContext {
open: boolean;
setOpen: Dispatch<SetStateAction<boolean>>;
}
export const MenuContext = createContext<IMenuContext>({
open: false,
setOpen: () => {},
});

此外，您需要键入ManuManager组件的props，而不是any。

function MenuManager(props: React.PropsWithChildren<{}>) {
const [open, setOpen] = useState(false);
return (
<MenuContext.Provider value={{ open, setOpen }}>
{props.children}
</MenuContext.Provider>
);
}