Превышена максимальная глубина обновления. Реагировать useEffect

Question

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

Blockquote Это может произойти, когда компонент вызывает setState внутри useEffect, но useEffect либо не делает не имеет массива зависимостей или одна из зависимостей изменяется при каждом рендеринге.

Вот код компонента:

import React, { useState, useEffect } from 'react';
import classNames from 'classnames';

import Button from '../Button';

const nsBase = 'component';

const ns = `${ nsBase }-content-feed`;

const ContentFeed = (props) => {
  const {
    showAllItems,
    items,
    nextVisibleAmount,
    ItemView,
    loadButton
  } = props;

  let {
    initialVisibleAmount
  } = props;

  const {
    label
  } = loadButton;

  // if showAllItems display all items in items array
  if (showAllItems) {
    initialVisibleAmount = items.length;
  }

  const [visible, setVisible] = useState(initialVisibleAmount);
  const [visibleItems, setvisibleItems] = useState([...items]);

  useEffect(() => {
    setvisibleItems([...props.items]);

    if (props.items.length < initialVisibleAmount) {
      setVisible(props.items.length);
    } else {
      setVisible(initialVisibleAmount);
    }
  }, [props, initialVisibleAmount]);


  const handleLoadMore = () => {
    setVisible((prevState) => {
      return (prevState + nextVisibleAmount);
    });
  };

  const rootClassnames = classNames({
    [`${ ns }`]: true
  });

  return (
    <div className={rootClassnames}>
      {visibleItems.slice(0, visible).map((item, index) => {
        return <ItemView key={item.id} article={item} index={index} />;
      })}
      {(visible < visibleItems.length) && (
        <div className={`${ ns }__load-more`}>
          <Button onClick={handleLoadMore}><h4>{label}</h4></Button>
        </div>
      )}
    </div>
  );
};

export default ContentFeed;

ContentFeed.defaultProps = {
  showAllItems: false,
  items: [],
  initialVisibleAmount: 3,
  nextVisibleAmount: 3,
  ItemView: () => {
    return <div>Item View Default</div>;
  },
  loadButton: {
    label: 'More'
  }
};

Answer 1

Добавьте несколько проверок в использование ловушек эффектов. В первой строке useEffect всегда обновляется состояние, что приводит к инфинте l oop. Любое изменение в состоянии выполнит хук useEffect, поскольку он зависит от props, initialVisibleAmoun.

Попробуйте что-то вроде этого.

 useEffect(() => {
        if(props.items !== visibleItems) {
            setvisibleItems([...props.items]);
        }

        if(props.items.length !== visible) {
            if (props.items.length < initialVisibleAmount) {
                setVisible(props.items.length);
            } else {
                setVisible(initialVisibleAmount);
            }
        }

    }, [props, initialVisibleAmount]);