如何创建 Material UI 自动完成组件来处理 graphql 查询？

Question

我正在使用 React Typescript 并有一个自动完成材质 UI 组件。我正在尝试将查询建议放入自动完成组件中。

我的 graphql 查询如下所示：

查询定义：

import gql from 'graphql-tag';
import {useQuery} from 'react-apollo';
import {Autocomplete} from '@material-ui/lab';
const TODOS = gql`
  query todos($id: ID!) {
    todo(id: $id) {
      id
      name
    }
  }
`;

查询初始化：

const { loading, error, data } = useQuery(TODOS, {
  variables: { id: 1 }
});

自动完成组件

{loading ? (
                <p>Loading ...</p>
              ) : (
                <>
                  <div>
                    {data &&
                  data.todo &&
                  data.todo.map(
                    (idx: {id: number; name: string}) => (
                      <Autocomplete
                        id="combo-box-demo"
                        options={idx.name}
                        getOptionLabel={option => option.name}
                        style={{width: 300}}
                        renderInput={params => (
                          <TextField
                            {...params}
                            label="Combo box"
                            variant="outlined"
                          />
                        )}
                      />
                    )
                  )}

我收到以下错误：

1. 对于行：“options={idx.name}” - 类型 'string' 不可分配给类型 'unknown[]'。
2. 对于行：“getOptionLabel={option => option.name}”- 对象的类型为“未知”。

我遇到了以下问题：

• 我怎样才能让它工作？
• 是什么导致了这个错误？

Answer 1

options 需要一个数组，您正在传递一个字符串。 Object is of type 'unknown' 是一个通用的 TS 错误消息。我想如果你这样输入：

 getOptionLabel={(option: {name: string}) => option.name}

它应该停止。