反应选择异步获取

Question

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

这是我的反应选择组件：

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

在 onFocus 中，我通过 redux action 进行 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。