Блог

Главная - Вопросы по программированию - Всплывающее окно пользовательского интерфейса материала — как открыть его без крючков?

Всплывающее окно пользовательского интерфейса материала — как открыть его без крючков?

#reactjs #material-ui

Вопрос:

Из-за внешней библиотеки, которую я должен использовать, и я не могу избежать, повторная визуализация компонента, который у меня есть, вызывает это сообщение об ошибке:

 Error: Rendered more hooks than during the previous render.

Я знаю, что это вызвано тем, что я использую крючки внутри своего компонента. Смотрите содержимое моего компонента:

 import React, { useState } from 'react'; import Box from '@material-ui/core/Box'; import Popover from '@material-ui/core/Popover';  import ImageCell from 'App/components/DatabaseTable/Utils/ImageCell';  const Image = ({ defaultValueRow, valueRow }) =gt; { const [anchorEl, setAnchorEl] = useState(null); const id = `popover-${defaultValueRow[valueRow]}`;  const handlePopoverOpen = (event) =gt; setAnchorEl(event.currentTarget);  const handlePopoverClose = () =gt; setAnchorEl(null);  return (  lt;gt;  lt;Box  aria-haspopup={'true'}  aria-owns={anchorEl ? id : undefined}  onMouseEnter={handlePopoverOpen}  onMouseLeave={handlePopoverClose}  gt;  lt;ImageCell src={valueRow[defaultValueRow]} /gt;  lt;/Boxgt;  lt;Popover  id={id}  style={{ pointerEvents: 'none' }}  PaperProps={{  style: { padding: '8px' },  }}  open={anchorEl}  anchorEl={anchorEl}  anchorOrigin={{  vertical: 'top',  horizontal: 'center',  }}  transformOrigin={{  vertical: 'bottom',  horizontal: 'center',  }}  gt;  lt;ImageCell  style={{ maxWidth: '125rem', maxHeight: '15rem' }}  src={valueRow[defaultValueRow]}  /gt;  lt;/Popovergt;  lt;/gt;  );  };   export default Image;

Поскольку я не могу избежать использования этой внешней библиотеки, мне было интересно: Есть ли какой-либо способ управлять привязкой, чтобы не использовать крючок useState?

Комментарии:

1. вы уверены, что проблема в этом компоненте? Судя по всему, это не должно выдавать вам указанную ошибку.

2. Я уверен, что проблема не в этом компоненте, но пока я не могу избежать Компонента, который его производит… Поэтому мне было интересно, смогу ли я пока избежать крючков…

3. Единственный способ, которым хук useState в этом компоненте может вызвать это сообщение, — это если этот Image компонент вызывается условно как функция в другом компоненте (который затем предположительно отображает то, что возвращается при вызове Image() ), а не отображается как элемент. Это то, что происходит? Трудно рекомендовать курс действий, не видя контекста того, как используется этот компонент.

4. Хммм, может быть… Посмотрю, смогу ли я коснуться другого компонента, и, возможно, сообщу об ошибке… Потому что с этим все в порядке… Спасибо за совет @RyanCogswell

5. @RyanCogswell итак, в конце концов вы были совершенно правы. Я мог бы войти во внешний код, скопировать его и воспроизвести локально, и, основываясь на вашем ответе, я мог бы найти проблему. Я просто изменил компонент, который будет вызываться как компонент React, а не как функция. Не могли бы вы, пожалуйста, опубликовать это в качестве ответа, чтобы я мог его принять?

Метки: