按钮单击不适用于使用切换挂钩

Question

有一个按钮，单击时可以切换值。基于此值，按钮具有一个或另一个图标。

这是代码：

export const useToggle = (initialState = false) => {
const [state, setState] = useState(initialState);
const toggle = useCallback(() => setState((state) => !state), []);
return [state, toggle];
};

export function Sidebar({ isOpenedInitial }: SidebarProps) {
const [isOpened, setSidebarState] = useToggle(isOpenedInitial);
...
return (
<div>
<button onClick={setSidebarState}>{isOpened ? <OneIcon /> : <AnotherIcon />}</button>
...
)
}

它有效，但在onClick单词下有一条红线，上面写着：

键入'boolean |(((=>void('不可分配给类型"MouseEventHandler |未定义"。类型"false"为不可分配给类型"MouseEventHandler"|未定义的

我在谷歌上搜索了这条消息，在这里发现了一个关于它的问题，接受的答案表示从onClick={setSidebarState}更改为onClick={() => setSidebarState}。

更改已经完成，不再有警告，但按钮现在不起作用。我点击它，什么也没发生。

有什么想法吗？

Answer 1

如果将useToggle的返回值标记为const，它将推断数组的第二个元素的正确类型

export const useToggle = (initialState = false) => {
const [state, setState] = useState(initialState);
const toggle = useCallback(() => setState((state) => !state), []);
return [state, toggle] as const;
};
export function Sidebar() {
const [isOpened, setSidebarState] = useToggle();
return (
<div>
<button onClick={setSidebarState}>{isOpened ? ... : ...}</button>
</div>
);
}

Answer 2

现在，您需要明确地说setSideBarState是一个函数，所以您需要将setSideBarState[(]