Javascript 将react虚拟化列表的当前索引设置为状态时出错

问题

我正试图从

onRowsRendered（）

内将

startIndex

置于状态

在将

CellMeasurer

放入混合液之前，该方法效果良好

向下和向上滚动时，会出现以下错误：

未捕获不变冲突：超过最大更新深度。当组件在

componentWillUpdate

或

componentdiddupdate

内重复调用

setState

时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环

是什么导致了这个问题？是什么解决了这个问题

演示

• （错误）
• （没有错误）

代码

从“React”导入React；
从“react dom”导入react dom；
从“伪造者”进口伪造者；
从“react virtualized”导入{List，CellMeasurer，CellMeasureCache}；
导入“/styles.css”；
伪造种子（1234）；
常量行=[…数组（1000）].map（（）=>
faker.lorem.语句（faker.random.number（{min:5，max:10}））
);
常量应用=（）=>{
常量[currentIndex，setCurrentIndex]=React.useState（0）；
常量行渲染器=（{key，index，style，parent}）=>{
返回(
{行[索引]}
);
};
返回(
{currentIndex}

当向下滚动然后向上滚动时，会发生错误。为什么？

{
setCurrentIndex（startIndex）；
}}
/>
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）

您需要将

行渲染器

和

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 }))
);

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} />
    </>
  );
};

从“React”导入React；
从“react dom”导入react dom；
从“伪造者”进口伪造者；
从“react virtualized”导入{List，CellMeasurer，CellMeasureCache}；
导入“/styles.css”；
伪造种子（1234）；
常量行=[…数组（1000）].map（（）=>
faker.lorem.语句（faker.random.number（{min:5，max:10}））
);
类VirtualList扩展了React.Component{
行渲染器=（{键，索引，样式，父级}）=>{
返回(
{行[索引]}
);
};
render（）{
返回(
)
}
}
常量应用=（）=>{
常量[currentIndex，setCurrentIndex]=React.useState（0）；
返回(
{currentIndex}

当向下滚动然后向上滚动时，会发生错误。为什么？

);
};

您是否尝试使用

备忘录

？@AlexandrZavalii更新了第一个示例以使用

备忘录

。问题仍然存在。如果您将虚拟列表放在另一个自定义组件中，并使用道具更新当前索引，该怎么办？然后使您的自定义组件纯净。尝试了一些东西。似乎没什么区别。这很吸引人，正如你所建议的，它似乎在起作用！你能解释一下为什么会这样吗？也适用于。甚至适用于…@Willem Aart说实话，我不知道为什么：D可能是因为每次在functional component中都会重新创建

rowRenderer

函数吗？@Willem Aart不客气：）您能将其标记为正确答案吗？