Question

我是ReactJS的新手，我试图创建一个带有值列表的组件（应该从API提取），并且应该允许搜索。

上面的示例运行良好，但是它使用本地数据。如何与远程数据集成。每次按键时，它都应按API并获取新数据。

Answer 1

您正在寻找的是@Laura所说的React-Select AsyncSelect。该文档有点混乱。这是文档中的基本示例：

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，该Promise最终解析为选项列表。如果用fetch()（返回一个Promise）替换该方法的内部信息，则当该请求解析为选项列表时，这些选项将应用于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);
           });
};

如何将React-Select与Rest API（远程数据）集成

1 个答案: