Question

我正在为react-select中的异步选择而苦苦挣扎。我设法显示了一些defaultOptions并使用Promise和loadOptions prop异步获取了它的选项。

我需要的是在单击时显示选项下拉菜单时更新选项（兑现承诺）。有没有办法执行相同的承诺onClick（甚至在onChange中）？

我正在使用react-select团队https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

提供的以下代码笔

谢谢您的帮助！

Answer 1

通过将defaultOptions设为true，组件将立即加载loadOptions。因此，它按预期工作。

实际上没有办法更新options，因为只有在有inputValue && loadedInputValue的情况下，它才会这样做。您可以提供拉取请求以添加该功能。

 render() {
      const { loadOptions, ...props } = this.props;
      const {
        defaultOptions,
        inputValue,
        isLoading,
        loadedInputValue,
        loadedOptions,
        passEmptyOptions,
      } = this.state;
      const options = passEmptyOptions
        ? []
        : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
      return (
        // $FlowFixMe
        <SelectComponent
          {...props}
          filterOption={this.props.filterOption || null}
          ref={ref => {
            this.select = ref;
          }}
          options={options}
          isLoading={isLoading}
          onInputChange={this.handleInputChange}
        />
      );
    }

来源：https://github.com/JedWatson/react-select/blob/master/src/Async.js#L150-L176

Answer 2

我实际上找到了一种使用基本const data = [ {id:1,name:'John',phone:'11111111',email:'aaaa@test.com'}, {id:2,name:'Marc',phone:'99999999',email:'bbbb@test.com'}, {id:3,name:'Ron',phone:'99999999',email:'aaaa@test.com'}, {id:4,name:'Andrew',phone:'55555555',email:'dddd@test.com'}, {id:5,name:'Wim',phone:'99999999',email:'gggg@test.com'}, {id:6,name:'Marc',phone:'33333333',email:'cccc@test.com'}, {id:7,name:'Dan',phone:'44444444',email:'cccc@test.com'} ]; const groups = function(inputs) { let valuesToGroups = new Map( ['name', 'phone', 'email'].map(key => [key, new Map()])); let groups = new Map(); let pendingMerges = []; for (const entry of inputs) { let group = undefined; let found = []; for (const [key, valueMap] of valuesToGroups) { // look up value in values-index for current key group = valueMap.get(entry[key]); if (group !== undefined) { found.push(group); // not breaking allows groups to be merged } } if (found.length === 0) { // not found: create new group group = groups.size; groups.set(group, [entry.id]); } else { // found: add entry to chosen group group = found[0]; groups.get(group).push(entry.id); if (found.length > 1) { pendingMerges.push(found); } } // add entry's values to index, pointing to group for (const [key, valueMap] of valuesToGroups) { valueMap.set(entry[key], group); } } // do pending merges; initially, all groups are stand-alone let merges = new Map(Array.from(groups.keys()).map(k => [k, k])); for (const merge of pendingMerges) { // contents will go to the lowest-numbered group const sorted = merge.map(groupId => merges.get(groupId)).sort(); sorted.forEach(groupId => merges.set(groupId, sorted[0])); } const cleanGroups = new Map(); groups.forEach((value, key) => { const k = merges.get(key); if ( ! cleanGroups.has(k)) { cleanGroups.set(k, []); } value.forEach(id => cleanGroups.get(k).push(id)) }) // return only non-empty groups return [... cleanGroups].filter(g => g[1].length>1).map(g => [... g[1]]); }(data); console.log(""+JSON.stringify(groups)) // output is [[1,2,3,5,6,7]]来解决它的方法。我将使用设置为react-select的反应状态来管理options。使用这种方法，我可以控制用户单击选择项时显示的选项。

https://codesandbox.io/s/vnmvrwoj63

反应异步选择

2 个答案: