React-select 异步获取

Question

我正在使用react和react-select，并尝试从api中获取选项。一切都很顺利，但我想在数据来自api的同时，显示加载到react-select的文本。

这是我的react-select组件。

<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.comasync。 但我不明白在哪里进行api调用。

或者说，我怎么能在api调用完成并填满状态的时候，直接在select中写上加载。

Answer 1

你有几个选项可以从HTTP请求中异步加载选项。

需要注意的是：如果你需要你的选项在Redux商店中，你可以在你的组件中使用Redux mapStateToProps获取你的选项，不需要在组件状态中设置它们。如果你不需要它们在商店中，使用Redux动作和reducer是不必要的，因为你可以直接从你的组件中执行HTTPaxios请求，并在组件状态中设置结果。假设你想使用redux来做这件事，我们提供了一些例子。

查看这个沙盒，以获得以下组件的工作示例（模拟Reddux动作的包装器和mapStateToProps）。https:/codesandbox.iostrusting-golick-wx991?file=srcSelects.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会让你很容易地在组件渲染时或输入改变时（在选择框中键入）加载选项，并且默认情况下，如果下拉框打开，而选项仍在加载，它会在下拉框中显示 "Loading... "文本。

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。