javascript - React Material UI Autocmplete，React-window 在列表顶部重新渲染

Question

我最近开始学习 React 并且可以使用任何帮助。

我遇到了 Material-ui 自动完成组件的问题。需要一些真正的 React 大师来解决这个问题。我遇到的问题是，当我从自动完成下拉菜单中选择一个选项时，它会重置到列表的顶部。我正在使用 react-window，因为列表中有 300 多个元素。成分过滤器是我正在尝试修复的过滤器，其他过滤器工作正常。我创建了代码沙箱来演示应该发生什么以及当前正在发生什么。我已经搞砸了 React.memo 但这对它没有任何影响。如果您有任何想法，请告诉我。正确的沙箱来自 material-ui 站点：autcomplete 组件

正确：正确的沙箱

正确的gif

问题：问题沙箱

问题 gif

如果您需要任何澄清，请告诉我

Answer 1

我必须在 ListboxComponent 上使用 useCallback，请立即尝试。代码链接：https ://codesandbox.io/s/material-demo-33l5y?file=/demo.js:11315-11331

老答案：

似乎当我们调用 setIngredients 时，它正在重新渲染组件并导致列表跳到顶部，记住 handleIngredients 函数似乎可以修复它。

const handleIngredients = React.useMemo((event, value) => {
  setIngredients(value);
}, []);