react-select async creatable 不推荐

Question

我正在尝试将 AsyncCreatableSelect 与示例数据一起使用：

[
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

我的代码如下所示：

const fetchData = () => {
    return new Promise(resolve=>{
        resolve([
            { value: 'chocolate', label: 'Chocolate' },
            { value: 'strawberry', label: 'Strawberry' },
            { value: 'vanilla', label: 'Vanilla' }
        ])
    })
}

const component = () => {
    return(
            <AsyncCreatableSelect
                cacheOptions
                defaultOptions
                loadOptions={fetchGameList}
            />
    );
}

问题是，数据已正确加载，但是当我输入时，与网站上的示例相比，我没有得到任何建议：

无论我输入什么，结果总是一样的。

Answer 1

最好使用 useMemo 或 useCallback 之类的东西，并在该列表中或 return 添加您需要显示的数组。

您可以输入

const data = useMemo(() => { ...code... }, [deps])

在 ...code... 中，您可以键入代码，但在 deps 中，您可以观察一些变量，一旦 deps 发生更改，您的 useMemo 将再次触发...

Answer 2

在您链接的文档中，它包含“filterColors”函数。您需要实现类似或等效的功能，并将“loadOptions”功能的return值包装在其中，方法与它们相同。

import React, { Component } from 'react';

import AsyncCreatableSelect from 'react-select/async-creatable';
import { colourOptions } from '../data';

const filterColors = (inputValue: string) => {
  return colourOptions.filter(i =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(filterColors(inputValue));
    }, 1000);
  });

export default class WithPromises extends Component<*, State> {
  render() {
    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultOptions
        loadOptions={promiseOptions}
      />
    );
  }
}

参考上面的“promiseOptions”，它是用于“loadOptions”的函数。输入值returned被包装在“filterColors”函数中，它进行排序。

Answer 3

如果您的 fetchGameList 已经返回排序列表，那将是最好的。您的后端将进行排序。

react-select async creatable 不推荐

react-select async creatable does not recommend

reactjs

react-select