reactjs - Material-UI React-Select 自动完成预选项目错误

Question

我在我的应用程序中使用了一个 react-select 组件。它与 algolia 相关联，它为我提供了选项。一切正常，除非我之前已经选择了一个值，然后再次输入选择。每个项目看起来都是预先选择的。

[ 这是我的代码：

type Hit = {
 address: string;
  zip: string;
  city: string;
  objectID: string;
};

const algoliaClient = algoliasearch(
  'something',
  'something',
  {
    timeout: 1000,
  },
);

const index = algoliaClient.initIndex('something');

export const Search: React.FC<{ section: ComponentTextInput }> = ({
  section,
}) => {
  const [currentHit, setCurrentHit] = React.useState<Hit>();
  const [hitArray, setHitArray] = React.useState<Hit[]>([]);
  const [noOptionMessage, setNoOptionMessage] = React.useState<string>(
    'Bitte geben Sie mindestens 3 Zeichen ein',
  );

  function onChange(value: string) {
    if (value.length > 2) {
      index.search<Hit>({ query: value }, (error, { hits }) => {
        if (error) {
          throw new Error(error.message);
        }
        if (hits.length === 1) {
          setCurrentHit(hits[0]);
        } else {
          setHitArray(hits);
          setCurrentHit(undefined);
          setNoOptionMessage('Keine Addresse gefunden');
        }
      });
    } else {
      setNoOptionMessage('Bitte geben Sie mindestens 3 Zeichen ein');
      setHitArray([]);
    }
  }

  const classes = useStyles();

  return (
    <div className={classes.textField}>
      <Select
        onInputChange={onChange}
        inputId="react-select-single"
        placeholder="Bitte geben Sie Ihre Addresse ein"
        TextFieldProps={{
          label: 'Address',
          InputLabelProps: {
            htmlFor: 'react-select-single',
            shrink: false,
          },
        }}
        value={currentHit}
        noOptionsMessage={() => noOptionMessage}
        options={hitArray}
        pageSize={10}
      />
    </div>
  );
};

有人能告诉我为什么选择会预选每个值吗？

提前致谢！

标签： reactjstypescriptautocompletematerial-ui