Reactjs 如何创建材质UI自动完成组件以处理graphql查询？

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

我的graphql查询如下所示：

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

查询定义：

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"
                          />
                        )}
                      />
                    )
                  )}

{正在加载(
加载

) : (
{数据&&
data.todo&&
data.todo.map(
（idx:{id:number；name:string}）=>(
option.name}
样式={{宽度：300}
renderInput={params=>(
)}
/>
)
)}

我收到以下错误：

对于行：“options={idx.name}”-类型“string”不可分配给类型“unknown[]”

对于行：“getOptionLabel={option=>option.name}”-对象的类型为“未知”

我有以下问题：

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

---

选项需要一个数组，您正在传递一个字符串。

对象的类型为“未知”

是一条通用的TS错误消息。我认为如果您这样键入它：

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

---

它应该停止。

选项需要一个数组，而您正在传递一个字符串。

对象的类型为“未知”

是一条通用的TS错误消息。我认为如果您这样键入它：

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

---

它应该停止。

如何设置查询id，然后将更新后的查询发送到自动完成组件？您可以在此处检查后续问题：如何设置查询id，然后将更新后的查询发送到自动完成组件？您可以在此处检查后续问题：