React-select + Inertia.js

Question

我正在使用 Inertia.js，并且我一直很喜欢它。

无论如何，我遇到了一个我似乎无法弄清楚的问题。我有一个选择输入，其中包含数据库中的选项，但其中很多都是大约的。 30/40k 所以我的想法是只取前 20 个，然后让用户输入搜索并带来与该结果匹配的前 20 个。

我的所有后端都工作正常，但我遇到的问题是在搜索后显示更新的选择选项。

相关代码如下：首先从react-select包中调用AsyncSelect组件。该组件需要一个 loadOptions 属性，该属性将在用户开始输入时调用一个函数

<AsyncSelect
    name="proveedores"
    id="proveedores"
    defaultOptions={proveedores}
    loadOptions={handleChange}
 /> 

被调用的函数是这个，它接收输入值和回调，在这个回调中我应该搜索新数据并返回它

function handleChange(inputValue,callback) {
        setValues(values => ({
            ...values,
            ["search"]: inputValue
        }));

        callback()
    }

问题是要在搜索中加载新数据，我正在使用 useEffect

useEffect(() => {
        if (prevValues) {
            const query = pickBy(values)
            Inertia.get(window.location.href, query, {
                replace: true,
                preserveState: true
            });
        }

    }, [values]);

使用 useEffect 进行的搜索工作正常，如果我执行 console.log，我将看到更新的 Proedores 列表，但问题是如何告诉 handleChange 函数的回调它应该侦听 useEffect 并在完成时使用新值证明者

如果有人必须使用 Inertia + React 做这样的事情（使用数据库中的搜索数据进行 React Select），我真的很感激一些关于如何实现它的反馈。

谢谢！！

Answer 1

实际上，你可以用

Axios

而不用

useEffect

来实现，这是一个例子（对我有用）：

  const loadOptions = (inputValue, callback) => {
    axios
        .get(route("city.index"), { params: { name: inputValue } })
        .then((res) => {
            callback(res.data)
            );
        });
};
  <AsyncSelect
           cacheOptions
           loadOptions={loadOptions}
           defaultOptions
           id={name}
           name={name}
           onChange={...}
  />