× Ошибка: неверный вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции - PullRequest
Новая
       22

× Ошибка: неверный вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции

0 голосов
/ 16 марта 2020

У меня есть недельный календарь, где можно использовать календарь реакции-большого. В этой библиотеке есть действие под названием 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>
);

1 Ответ

1 голос
/ 16 марта 2020

Поскольку модальный компонент является компонентом, вы не можете вызывать его как функцию. Вместо этого вам нужно сделать это. Чтобы отобразить модальный режим, вы можете сохранить состояние, которое вы установили, чтобы знать, когда его запускать 

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.

...