Material-UI - TypeScript - 使用 getOptionLabel 和 renderOption 自动完成答案

【问题标题】：Material-UI - TypeScript - Autocomplete with getOptionLabel and renderOptionMaterial-UI - TypeScript - 使用 getOptionLabel 和 renderOption 自动完成
【发布时间】：2022-01-04 06:19:28
【问题描述】：

我正在尝试使用 MUI Autocomplete 显示 member 和 company。

我有 suggestion 数组显示为 options

[
    {
        "__typename": "Member",
        "id": "ckwa91sfy0sd241b4l8rekas9jx",
        "name": "my name 2",
        "companyName": ""
    },
    {
        "__typename": "Member",
        "id": "ckwac4ijl25dsd80b4l8fpsrc64o",
        "name": "my name",
        "companyName": ""
    },
    {
        "__typename": "Member",
        "id": "ckwa8z6z7004dsd2b4l81m6ras9c",
        "name": "my name 1",
        "companyName": "A COMPANY"
    }
]

我用这个来显示

 <Autocomplete
                                        id="free-solo-demo"
                                        freeSolo
                                        options={
                                            suggestion &&
                                            suggestion.map(
                                                (suggestion: any) =>
                                                    suggestion.name
                                            )
                                        }
                                        onChange={(event, value) =>
                                            HandleUserProfile(value)
                                        }
                                        renderInput={(params) => (
                                            <TextField
                                                {...params}
                                                placeholder="Search..."
                                                onChange={handleChange}
                                            />
                                        )}
                                    />

通过使用它，如果我只使用 member 名称搜索，我将获得选项。

我想同时使用company 和member 进行搜索，并且需要自定义选项的UI。

我试过了

 <Autocomplete
                                        id="free-solo-demo"
                                        freeSolo
                                        options={suggestion}
                                        getOptionLabel={(option) => `${option.name}  ${option.companyName}`}
                                        renderOption={(option)=>{
                                            return <h1>{`${option.name}: ${option.companyName}`}</h1>
                                        }}
                                        onChange={(event, value) =>
                                            HandleUserProfile(value)
                                        }
                                        renderInput={(params) => (
                                            <TextField
                                                {...params}
                                                placeholder="Search..."
                                                onChange={handleChange}
                                            />
                                        )}
                                    />

但它不起作用。它显示错误TypeScript error in ... Property 'name' does not exist on type 'never'. TS2339

【问题讨论】：

标签： node.js reactjs typescript material-ui

【解决方案1】：

首先，您应该确保name 字段没有任何重复值，这就是为什么您应该使用强制id 字段来选择一个。

您还需要构建自定义过滤器功能或使用来自Autocomplete 组件的createFilterOptions 钩子。

https://mui.com/components/autocomplete/#custom-filter

import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';

...
  const filterOptions = createFilterOptions({
    stringify: ({ name, companyName }) => `${name} ${companyName}`
  });

  <Autocomplete
    options={suggestion}
    getOptionLabel={option => option.name}
    filterOptions={filterOptions}
    ...
  />;

【讨论】：