React-select 异步获取

我正在使用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中写上加载。

解决方案:

你有几个选项可以从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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

能否将一个有向图分成两组,使组内的节点不相互连接?

2022-9-9 22:00:43

未分类

为什么我在JS中得不到控制台的日志?

2022-9-9 22:00:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索