Блог

Я пытаюсь использовать <AsyncSelect /> для извлечения параметров из API для заполнения формы.

Это работает при первом поиске чего-либо, я могу выбрать опцию, а затем мне будет предложено ввести снова.

Однако, когда я набираю что-то еще, я получаю No Options , хотя я вижу, что данные отображаются в console.log().

 import React, { Component } from 'react';
import AsyncSelect from 'react-select/async';

type State = {
  inputValue: string,
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(
        fetch('https://restcountries.eu/rest/v2/all')
        .then(r => r.json())
        .then(rjson => {
          return rjson.map(c => {
            return { name: c.name, label: c.name}
          })
        })
      );
    }, 1000);
  });

export default class AsyncMulti extends Component<*, State> {
  state = { inputValue: '' };
  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };
  render() {
    return (
      <AsyncSelect
        isMulti
        loadOptions={promiseOptions}
      />
    );
  }
}

  

Я только что понял, что объект, возвращаемый в обещании:

 { name: c.name, label: c.name }
  

были неправильные ключи, а должны были быть:

 { value: c.name, label: c.name }
  

И это работает сейчас.