× Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

我有一个周历，在哪里可以使用 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>
);

Answer 1

由于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。

× Error: Invalid hook call. Hooks can only be called inside of the body of a function component

× Error: Invalid hook call. Hooks can only be called inside of the body of a function component

jsx

reactjs

react-big-calendar