如何在“材料UI自动完成”加载后显示建议？

托马斯·史密柯夫斯基（Tomasz Smykowski）

使用Material UI自动完成（https://material-ui.com/components/autocomplete/）时，将创建输入并显示建议：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const options = ['Option 1', 'Option 2'];

export default function ControllableStates() {
  ...

  return (
    ...
      <Autocomplete
        onInputChange={(event, newInputValue) => {
          if (newInputValue.length < 3) return;
          // UPDATING OPTIONS
          options.length = 0;
          getNewOptions(newInputValue).forEach((item) => options.push(item)):
        }}
        options={options}
        ...
        renderInput={(params) => <TextField {...params} />}
      />
    ...
  );
}

但是实际上发生的是执行了getNewOptions，更新了选项，但未显示建议列表。但是，当我键入“ xyz”，然后按退格键时，建议列表将显示最后一次执行getNewOptions的数据。

因此，当我在onInputChange中加载数据时，似乎出现了某种竞争状况，导致建议列表不显示。更新选项后如何强制显示建议？

索尼娅·阿吉拉尔（Sonia Aguilar）

尝试将选项用作状态，而不是推送到选项，而使用'setState'方法更新该值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。