Как интегрировать React-Select с Rest API (Remote Data)

Question

Я очень плохо знаком с ReactJS, я пытаюсь создать компонент со списком значений (должен быть получен из API) и должен разрешить поиск.

https://codesandbox.io/s/v1v1xp1xn3

Приведенный выше пример работает нормально, но использует локальные данные.Как интегрировать с удаленными данными.При каждом нажатии клавиши он должен нажимать API и получать новые данные.

Answer 1

То, что вы ищете, это React-Select AsyncSelect, как сказал @Laura.Документация немного запутанная.Вот базовый пример в документах:

import React, { Component } from 'react';

import AsyncSelect from 'react-select/lib/Async';
import { colourOptions } from '../data';

const filterColors = (inputValue: string) => {
  return colourOptions.filter(i =>
      i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(filterColors(inputValue));
    }, 1000);
  });

export default class WithPromises extends Component {
  render() {
    return (
      <AsyncSelect cacheOptions defaultOptions loadOptions={promiseOptions} />
    );
  }
}

Здесь вы увидите, что loadOptions использовал метод promiseOptions, который возвращал Promise, который в конечном итоге разрешился в список опций.Если вы замените внутреннюю часть этого метода на fetch() (который возвращает Обещание), то, когда этот запрос будет разрешен в списке параметров, эти параметры будут применены к AsyncSelect.

const promiseOptions = inputValue => {
  const url = `my/remote/source${inputValue ? '?searchParam=' + inputValue : ''}`;
  return fetch(url)
           .then(response => response.json()) // my option list array?
           .catch(err => {
             console.log('some error', err);
           });
};