首次打开Async下拉菜单时加载选项

Question

当我向JsonArray jsonarray= obj2.getJsonArray("Airport"); 控件提供loadOptions时，它会加载mount上的选项。

如果我通过Async，那么它既不会在挂载上也不会在打开时加载选项。但它会在第一次关闭（或键入或模糊）时加载选项。

如果我通过autoload={false}，那么在我输入内容之前它不会加载选项。 （显示＆＃34;键入要搜索＆＃34;在菜单中）

onCloseResetsInput={false}提供Async处理程序，但在这种情况下我找不到使用它的方法。 （而onOpen没有）

因此用户需要输入一个字符，然后将其删除，以查看完整的选项列表。

如何避免这种情况？

示例沙箱：https://codesandbox.io/s/mjkmowr91j

Answer 1

解决方案演示：https://codesandbox.io/s/o51yw14l59

我使用了react-select repo。

中的Async options loaded externally部分

我们首先在选择onFocus上加载选项，然后将状态设置为isLoading: true。当我们收到选项时，我们将它们保存在状态中并在选项中进行渲染。

我还跟踪optionsLoaded，以便只在第一个focus触发调用以获取选项。

Answer 2

在我们的使用案例中，我们在一个页面上有几个这样的选择输入，都是异步的，因此对服务器的请求将堆积起来，在很多情况下完全没有必要（用户甚至不会打扰点击）。

我发现这个问题的解决方法对于我的2.0.0-beta.6上的用例非常有用：

1. 包括defaultOptions
2. 向您的班级添加2名成员，这些成员将存储承诺的resolve / reject方法。
3. 在您的loadOptions函数中，检查输入是否为''，如果是，请创建新的承诺，并将resolve / reject的值存储在您的班级成员中，并且回报那个承诺。否则，只需返回承诺即可获得结果。
4. 添加一个onFocus处理程序，并在其中调用该函数以获取结果，同时添加.then和.catch个回调，通过您存储的resolve和reject函数先前。

基本上，这会让react-select认为你正在努力用长期运行的承诺来获得结果，但实际上你甚至不会尝试加载值，直到选择了字段。

我不是百分之百肯定没有任何负面影响，因为我刚刚写了这个，但它似乎是一个好的起点。

希望这有助于某人。我可以为此提交功能请求。

Answer 3

感谢Alexei Darmin提供的解决方案，我为此感到苦恼...在测试它时，我将解决方案转换为React功能组件并添加了真实的API提取。

这里是working demo，希望它对某人有帮助

Answer 4

为了在用户第一次聚焦时加载选项，设置defaultOptions={true}