Ошибка возникает при установке текущего индекса реактивно-виртуализированного списка в качестве состояния

Question

Проблема

Я пытаюсь перевести startIndex в состояние изнутри onRowsRendered().

Это отлично работает, до CellMeasurer помещается в микс.

При прокрутке вниз, а затем вверх возникает следующая ошибка:

Неуязвимое нарушение инварианта: превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

Что вызывает эту проблему и что ее решает?

Демо

• с CellMeasurer (ошибка)
• без CellMeasurer (без ошибок)

Код

import React from "react";
import ReactDOM from "react-dom";
import faker from "faker";
import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";

import "./styles.css";

faker.seed(1234);

const rows = [...Array(1000)].map(() =>
  faker.lorem.sentence(faker.random.number({ min: 5, max: 10 }))
);

const App = () => {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const rowRenderer = ({ key, index, style, parent }) => {
    return (
      <div style={style}>
        <div style={{ borderBottom: "1px solid #eee", padding: ".5em 0" }}>
          {rows[index]}
        </div>
      </div>
    );
  };

  return (
    <>
      <h1>{currentIndex}</h1>
      <p>
        <em>When scrolling down and then up, an error occurs. Why?</em>
      </p>
      <List
        height={400}
        width={600}
        rowCount={rows.length}
        rowHeight={35}
        rowRenderer={rowRenderer}
        style={{ outline: "none" }}
        onRowsRendered={({ startIndex }) => {
          setCurrentIndex(startIndex);
        }}
      />
    </>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Вам необходимо переместить функции rowRenderer и cellMeasurer за пределы вашего функционального компонента. Потому что он будет воссоздан каждый раз при рендеринге вашего функционального компонента.

Функциональный компонент: https://codesandbox.io/s/nnp9z3o9wj?fontsize=14

Или вы можете использовать Компонент класса:

import React from "react";
import ReactDOM from "react-dom";
import faker from "faker";
import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";

import "./styles.css";

faker.seed(1234);

const rows = [...Array(1000)].map(() =>
  faker.lorem.sentence(faker.random.number({ min: 5, max: 10 }))
);

class VirtualList extends React.Component {


 rowRenderer = ({ key, index, style, parent }) => {
    return (
      <div style={style}>
        <div style={{ borderBottom: "1px solid #eee", padding: ".5em 0" }}>
          {rows[index]}
        </div>
      </div>
    );
  };

  render() {
     return (
      <List
        height={400}
        width={600}
        rowCount={rows.length}
        rowHeight={35}
        rowRenderer={this.rowRenderer}
        style={{ outline: "none" }}
        onRowsRendered={this.props.setCurrentIndex}
      />
     )
   }
}

const App = () => {
  const [currentIndex, setCurrentIndex] = React.useState(0);


  return (
    <>
      <h1>{currentIndex}</h1>
      <p>
        <em>When scrolling down and then up, an error occurs. Why?</em>
      </p>
      <VirtualList setCurrentIndex={setCurrentIndex} />
    </>
  );
};