React Material UI Autocmplete与列表顶部的React-window rerenders

Question

我最近开始学习React，需要任何帮助。

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

更正：correct sandbox

correct gif

问题：issue sandbox

issue 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);
}, []);