React-select 异步获取

Question

我正在使用 React 和 React-Select 并尝试从 api 获取选项。一切都对我有用，但我想展示将文本加载到react-select中，同时数据来自api。

这是我的反应选择组件：

<Select
    onChange={this.getSelectedOption}
    onFocus={this.getData}
    options={options}
    value={selectedOption}
    styles={customStyles}
    placeholder="Select...."
/>

在 onFocus 中，我通过 redux 操作进行 api 调用，并使用来自 redux reducer 的响应设置状态。

  getAvailableDisplays() {
    this.props.getData(); /// redux action dispatch
    if (this.props.data.items) {
   this.setState({ this.state.options: this.props.data.items }); }
  }

通过这种方式，一切正常，但在请求完成时，没有文本，没有选项。

我在这里看到了一些https://react-select.com/async但我不明白在哪里进行 api 调用。

或者我如何在 api 调用完成且状态填充时在 select 中编写加载

Answer 1

这里有一些选项可用于从 HTTP 请求异步加载选项。

请注意：如果您需要 Redux 存储中的选项，您可以使用 Redux mapStateToProps 在组件中获取选项，无需在组件状态中设置它们。如果您在商店中不需要它们，则不需要使用 Redux 操作和化简器，因为您可以直接从组件执行 HTTP/axios 请求并将结果设置在组件状态中。提供的示例假设您想使用 redux 来执行此操作。

查看此沙箱以获取以下组件的工作示例（模拟 Redux 操作和 mapStateToProps 的包装器）：https://codesandbox.io/s/trusting-golick-wx991 ?file=/src/Selects.js

如果您设置在焦点上加载，则使用 AsyncSelect 对您没有帮助，因为它只提供在渲染或输入更改时加载的内置选项。如果您想在下拉列表中显示加载消息，可以通过将选项默认设置为标签中包含加载消息的单个选项并根据加载状态禁用下拉列表来实现。如果需要，您还可以使用加载状态在输入框中设置加载消息，而不是在下拉列表中设置：

const MySelect = props => {
  const [loading, setLoading] = useState(false);
  const [hasLoaded, setHasLoaded] = useState(false);

  const handleFocus = () => {
    if (!props.options && !hasLoaded) {
      setLoading(true);
      setHasLoaded(true);
      return props.getData().then(() => setLoading(false));
    }
  };

  return (
    <Select
      onFocus={handleFocus}
      options={props.options || [{ value: 0, label: "Loading..." }]}
      placeholder={loading ? "Loading options..." : "Select...."}
      isDisabled={loading}
    />
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是，如果您实际上并未设置加载焦点上的选项，AsyncSelect 将让您在组件呈现或输入更改（在选择框中键入）时非常轻松地加载选项，并且默认情况下它将显示如果下拉列表在选项仍在加载时打开，则在下拉列表中显示“正在加载...”文本：

const MyAsyncSelect = props => {
  return (
    <AsyncSelect
      loadOptions={props.getAsyncData} // function that executes HTTP request and returns array of options
      placeholder={"Select...."}
      defaultOptions // load on render
      // defaultOptions={[id: 0, label: "Loading..."]} // uncomment this and comment out the line above to load on input change
    />
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果您希望在输入框中显示加载消息以及/而不是 AsyncSelect 的下拉列表，您也可以使用加载状态来完成此操作：

const MyAsyncSelectLoading = props => {
  const [loading, setLoading] = useState(false);

  const getData = () => {
    return props.getAsyncData().then(result => {
      setLoading(false);
      return result;
    });
  };

  return (<AsyncSelect
    loadOptions = {getData}
    placeholder = {loading ? "Loading data" : "Select...."}
    defaultOptions
    // isDisabled={loading} // uncomment this to disable dropdown until options loaded
  />);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

另外 - 上面的 getAvailableDisplays 函数不起作用，因为您正在调用异步 getData，然后在异步操作有时间完成之前检查 this.props.data.items。