Ошибка получения: обработано меньше хуков, чем ожидалось. при использовании useState

Question

Я использую react-admin фреймворк. Я написал свой собственный компонент, который отображает изображения в MaterialUI GridList. Мне пришлось реализовать функцию useState, чтобы определить, какие элементы отображать, если пользователь наводит указатель мыши на c Button. Однако после реализации useState приложение вылетает со следующей ошибкой:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Мой код:

const [mouseOver, setMouseOver] = useState(false);

const onButtonHover = () =>
{
    setMouseOver(true);
}

const onButtonClose = () =>
{
    setMouseOver(false);
}

return <GridListTile key={id} onMouseLeave={onButtonClose} {...tileProps}>
        <img src={ImageService.getUrl(image)} className={classes.pngbgr} alt={title} />
        {mouseOver ?
            <div className={classes.tagsContainer}>
                <TagsShow source="tags" record={record} />
            </div>
        :
            null
        }
        <GridListTileBar
            className={classes.tileBar}
            title={title}
            subtitle={tags !== undefined && tags.length > 0 ?
                <Button className={classes.tagsButton} onMouseOver={onButtonHover} label="hf.action.showTags"><LabelIcon /></Button>
                :
                null
            }
        />
    </GridListTile>;

Затем я визуализирую свой компонент в моей модели галереи:

const GalleryList = props => (
    <List filters={<GalleryFilter />} pagination={<ListPagination />} perPage={30} sort={{ field: '_id', order: 'ASC' }} actions={<Actions />} {...props}>
        <GridList rowClick="show" getTileProps={getGalleryTileProps} />
    </List>
);

Есть идеи, почему я получаю эту ошибку?

Заранее спасибо.

Answer 1

Эта статья Кента C Доддса может иметь отношение.

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

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

Перефразируя статью, если вы используете компонент в качестве вызова функции, скажите что-то вроде этого:

return arr.map(CustomComponent)

... поскольку он вызывается, а не "визуализируется", компонент хуки интерпретируются в рамках родительского компонента - и это будет переводиться примерно так ...

const ParentComponent() {
  return arr.map((item) => {
     // no. of hooks in ParentComponent depends on number of items
     const [mouseOver, setMouseOver] = useState(false);
     .. rest of your component
   }
}   

... что нарушает вышеупомянутые правила хуков.

Замена этого на это:

arr.map((item) => <CustomComponent item={item}/>)

заставляет React интерпретировать хуки как часть области пользовательского компонента, и он не вызывает эту ошибку.

Надеюсь, это поможет!

---

Обновление

Добавление обновления здесь для потомков

Этот компонент действительно есть вызов функции, как показано ниже:

{ids.map(id => GridTile({ id, record: data[id], basePath, classes, rowClick, getTileProps, resource }))}

Переключение на рендеринг устранило проблему:

{ids.map(id => <GridTile id={id} record={data[id] } basePath={basePath} classes={classes} rowClick={rowClick} getTileProps={getTileProps} resource={resource} /> )}