React中Material UI Autocomplete组件过滤选项不符合预期问题

输入“DUMMY”时，本该仅显示一个匹配项，但当前显示了多个项。

复现代码 #

import * as React from "react";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
import Autocomplete, { createFilterOptions } from "@mui/material/Autocomplete";

const _filterOptions = createFilterOptions();

export default function ComboBox() {
  const [optionCount, setOptionCount] = React.useState(0);
  const [options, setOptions] = React.useState(top100Films);
  const filterOptions = React.useCallback((options, state) => {
    const results = _filterOptions(options, state);

    if (optionCount !== results.length && results) {
      setOptionCount(results.length);
      //setOptions(results);
    }

    return results;
  }, []);

  return (
    <>
      <Typography mb={2}>Option count: {optionCount}</Typography>
      <Autocomplete
        filterOptions={filterOptions}
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
    </>
  );
}

问题原因 #

1. 闭包依赖缺失：filterOptions使用React.useCallback但未将optionCount加入依赖数组，函数内部始终捕获初始值0。每次过滤时，只要结果长度不为0，就会触发setOptionCount，导致组件频繁重渲染。
2. 过滤流程被状态更新干扰：filterOptions的核心职责是返回过滤后的选项，在此函数内调用setState会触发不必要的重渲染，打乱Autocomplete的内部过滤逻辑，最终导致显示错误的选项列表。

内容的提问来源于stack exchange，提问作者user5711656