标签: react-virtuoso

我有一个几乎可以工作的Material UI Autocomplete实现，其中下拉列表是用react-virtuoso虚拟化的。

我目前看到的问题是，当向上导航时（视频中的 0:25 ），列表不会移过最上面的项目，尽管该组件似乎认为它向上移动。

看起来内部列表正在向上移动，但 GUI 并未更新以反映这一点。\xe2\xac\x87\xef\xb8\x8f当按下 后按下时，这一点很明显：在最上面的项目再次突出显示之前，\xe2\xac\x86\xef\xb8\x8f需要尽可能多的\xe2\xac\x87\xef\xb8\x8f\' 。\xe2\xac\x86\xef\xb8\x8f预期的行为是像非虚拟化列表一样向上滚动，不确定这是否是react-virtuoso设置的问题，或者这是否是自动完成组件或结合两者的设置的问题。

有关此问题的实际操作视频可以在此 GitHub 问题中或直接在此处找到。

谢谢！

编辑：这是问题的codesanbox：https ://codesandbox.io/s/material-demo-forked-r6i2y?file=/demo.tsx

每个人。我正在研究react-virtuoso。它是一个用于高效渲染大型组件列表的新存储库。这是相当新的。我对它是如何工作的感到困惑。为什么react virtuoso可以克服react-virtuoso的问题？

非常感谢<3。

我正在使用react-virtuoso库来渲染一个简单的虚拟列表。代码非常简单。我传递了这个overscan道具并期望虚拟列表在视口上方和下方渲染n项目，但它不起作用。

ExpensiveComponent当我上下滚动一点时， s 仍然呈现“正在加载...”文本。这是代码：

import { Virtuoso } from "react-virtuoso";
import { useEffect, useState, useRef, PropsWithChildren } from "react";

function ExpensiveComponent({ children }: PropsWithChildren<{}>) {
  const [render, setRender] = useState(false);
  const mountRef = useRef(false);

  useEffect(() => {
    mountRef.current = true;

    setTimeout(() => {
      if (mountRef.current) {
        setRender(true);
      }
    }, 150);

    return () => void (mountRef.current = false);
  }, []);

  return (
    <div style={{ height: 150, border: "1px solid pink" }}>
      {render ? children …