尝试实现钩子时如何解决错误

Question

我想创建一个挂钩来放置我的菜单的状态和事件函数。但是当我在这个组件中导入点击功能时，出现如下错误：

“没有开销匹配此调用。 2 重载中的 1，'(props: { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject< ...> | null | undefined; ... 251 更多 ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }): ReactElement<. ..>'，产生了以下错误。无法将类型 'boolean | (() => void)' 分配给类型 'MouseEventHandler | Undefined'。无法将类型 'boolean' 分配给类型 'MouseEventHandler'。"

我该如何解决？

  import { useState } from "react";


export const useMenu = () => {
    const [openCardOptions, setOpenCardOptions] = useState(false);

    const handleOpenCardOptions = () => {
      setOpenCardOptions(!openCardOptions);
    };

    return [openCardOptions, handleOpenCardOptions]
}

import { useMenu } from "../../hooks/useMenu";


export const NoteCard = () => {
  const [openCardOptions, handleOpenCardOptions] = useMenu()

  return (
    <Container>
      <TopBar>
        <ImgContainer>
          <img src={noteImg} alt="Note" />
        </ImgContainer>

        <Menu onClick={handleOpenCardOptions}>
          <img src={menuImg} alt="Menu" />

          {openCardOptions && (
            <CardOptions>
              <div>
                <img src={viewImg} alt="View" />
                <p>Visualizar</p>
              </div>

              <div>
                <img src={pencilImg} alt="Pencil" />
                <p>Editar</p>
              </div>

              <div>
                <img src={binImg} alt="Bin" />
                <p>Deletar</p>
              </div>
            </CardOptions>
          )}
        </Menu>

Answer 1

尝试将函数的 return 语句更改为

return [openCardOptions, handleOpenCardOptions] as const;

如果您检查 useMenu() 的现有 return 类型，您会看到它 returns Array<boolean | (() => void)>--一个变量数组，其中每个项目都可以是布尔值或函数。不过这不是您要找的。

您希望 return 类型是元组，其中第一项始终是布尔值，第二项始终是函数。 as const 告诉 TypeScript 将数组文字视为元组而不是数组（除其他外，noted here）。

如果这样更有意义，您还可以明确写出 useMenu 的 return 类型：

export const useMenu = (): [boolean, () => void] => {

尝试实现钩子时如何解决错误

How to solve error when trying to implement hook

typescript

reactjs

react-hooks