时间戳

首页 > 解决方案 > × 错误：无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

reactjs - × 错误：无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

问题描述

我有一个周历，在哪里使用 react-big-calendar。在这个库中，有一个动作叫做onSelectEvent当我点击一个事件时，它会重现一个动作。但是当我单击组件执行操作时，它指出了错误。

在图书馆自己的文档中，它因此使用onSelectEvent = {event => alert (event.title)} 了所以它可以完美地工作但是，当我切换到onSelectEvent = {event => modal()}或者onSelectEvent = {modal()} 他指出这个错误时：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我的代码：

import Modal from "../modal";

return (
  <div>
    <Calendar
      events={events}
      localizer={localizer}
      defaultView={Views.WEEK}
      defaultDate={new Date(programming[0].schedules[0].initial_date)}
      onSelectEvent={event => Modal()}
      views={{ month: true, week: MyWeek }}
      toolbar={false}
      style={{ height: "70vw", paddingTop: 35 }}
    />
  </div>
);

代码模式：

return (
  <div>
    <Button id="Popover1" type="button">
      Launch Popover
    </Button>
    <Popover
      placement="bottom"
      isOpen={popoverOpen}
      target="Popover1"
      toggle={toggle}
    >
      <PopoverHeader>Popover Title</PopoverHeader>
      <PopoverBody>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam.
        Pellentesque ornare sem lacinia quam venenatis vestibulum.
      </PopoverBody>
    </Popover>
  </div>
);

标签： reactjsjsxreact-big-calendar

解决方案

由于 Modal 是一个组件，因此您不能将其作为函数调用。相反，您需要渲染它。要呈现模态，您可以保留您设置的状态以知道何时触发它

import Modal from "../modal";
const [isOpen, setIsOpen] = useState(false);
return (
  <div>
    {isOpen && <Modal /> }
    <Calendar
      events={events}
      localizer={localizer}
      defaultView={Views.WEEK}
      defaultDate={new Date(programming[0].schedules[0].initial_date)}
      onSelectEvent={event => setIsOpen(true)}
      views={{ month: true, week: MyWeek }}
      toolbar={false}
      style={{ height: "70vw", paddingTop: 35 }}
    />
  </div>
);

要关闭模式，您需要将状态设置为 false。

推荐阅读