资料Ui 5自动完成不返回筛选选项

Question

我使用的是资料ui V5，

由于自动完成中的默认筛选没有给出正确的结果数组，所以我编写了自己的filterOptions函数。

const filterOpt = (options, state) => {
 let result = options.filter(option => option.name.includes(state.inputValue))
 return result }   

函数返回的结果正是我想要的。不过，我还是能看到不想要的选择。

以下是我的自动完成组件：

<StyledAutocomplete
    disabled={disabled}
    id="field1"
    getOptionLabel={(option) => option.name || ""}
    isOptionEqualToValue={(option, value) => option.id === value.id}
    value={values[prop] || ""}
    noOptionsText={"No options found"}        
    options={data}
    style={{ width: "100%" }}
    PopperComponent={PopperMy}
    PaperComponent={CustomPaper}
    onChange={(event, newValue) =>
      setValues({ ...values, [prop]: newValue })
    }
    filterOptions={(options, state) => filterOpt(options, state)}
    renderInput={(params) => {
      const inputProps = params.inputProps;
      inputProps.autoComplete = "new-password";
      return (
        <StyledTextField
          {...params}
          inputProps={{
            ...params.inputProps,
            autoComplete: "new-password",
          }}
          name="field1"
          id="field1"
          autoComplete="off"
          type="text"
          label=""
          variant="outlined"
          error={error && !values[prop]}
          helperText={error && errorStatus ? errorTexts[prop] : ""}
        />
      );
    }}
  />

下面是我在过滤后看到的选项

​

下面是函数返回的结果数组：

​

是否有任何解决方案来向用户显示准确的过滤数组？

Answer 1

这是因为我的数据数组包含了一些具有相同键的项。