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

时间:2019-10-18 08:11:06

标签: reactjs typescript autocomplete material-ui

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

No preselected item [With a preselected value[2] 这是我的代码:

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>
  );
};

有人可以告诉我为什么选择会预先选择每个值吗?

谢谢!

0 个答案:

没有答案