typescript - Material-ui 建议不显示所有检索到的选项

Question

我正在根据 API 调用的建议为 Dynamics CRM 开发 PCF 组件。我的问题是我无法显示从服务器检索到的所有值。似乎“选项”在第一次 fetch 调用后没有更新。以下是我的组件中的代码

import * as React from 'react'
import AutoComplete, { AutocompleteInputChangeReason } from '@material-ui/lab/Autocomplete'
import TextField  from '@material-ui/core/TextField'
import { useState } from 'react';


export interface IDaDataControllerProps{    
  onValueChanged: (value?: any) => void;
  onGetOptionLabel: (value?: any) => string
  placeholder?: string
}

export const DaDataAddressComponent : React.FunctionComponent<IDaDataControllerProps> = 
(props: IDaDataControllerProps) => {

const [options, setOptions] = useState([]);

return(
    <AutoComplete
        id = "combo-box-demo"
        options = {options}
        onInputChange = {(e: React.ChangeEvent<{}>, value: string, reason: AutocompleteInputChangeReason) => {
            fetch('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address',
                                    {
                                        method: "POST",
                                        headers: {
                                            'Authorization': 'Token 37bcc555cd055d433a5cb674500f7bc7f05bf474',
                                            'Content-Type': 'application/json'
                                        },
                                        body: "{\"query\":\"" + value + "\"}"
                                    }).then((response) => response.json().then((item) => setOptions(item.suggestions)))
        }}
        renderInput = {(params) => (
            <TextField {...params} label= "Write any text"/>
        )}
        getOptionLabel = {(option) => props.onGetOptionLabel(option)}
        onChange = {(event, value) => {props.onValueChanged(value)}}       
    />
  )
}

当我第一次输入任何文本时，自动完成会显示所有检索到的建议（图 1）。但是当我输入一个更详细的名称时，组件不会显示检索到的值（图 2）。

所以我的问题是我做错了什么？

标签： typescriptreact-nativereact-hooksdynamics-crmpowerapps