Как интегрировать React-Select с Rest API (удаленные данные)

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

https://codesandbox.io/s/v1v1xp1xn3

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


rest material-ui react-select
person Mahipal Reddy    schedule 21.02.2019    source источник
comment
Вы читали документацию по async response-select react-select.com/async?   -  person Laura    schedule 21.02.2019

Ответы (1)


arrow_upward
9
arrow_downward

Вы ищете 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 метод, который вернул обещание, которое в конечном итоге преобразовалось в список параметров. Если вы замените внутреннюю часть этого метода на 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);
           });
};
person Steve -Cutter- Blades    schedule 26.02.2019