javascript - react-select debounced async call不显示建议

Question

我正在使用 react-select从 api 加载结果并使用 lodash.debounce 去抖动查询:

import React, {useState} from 'react';
import AsyncSelect from 'react-select/lib/Async';
import debounce from 'lodash.debounce';
import {search} from './api';

const _loadSuggestions = (query, callback) => {
  return search(query)
    .then(resp => callback(resp));
};

const loadSuggestions = debounce(_loadSuggestions, 300);

function SearchboxTest() {
  const [inputValue, setInputValue] = useState("");

  const onChange = value => {
    setInputValue(value);
  };

  return (
    <AsyncSelect
      value={inputValue}
      loadOptions={loadSuggestions}
      placeholder="text"
      onChange={onChange}
    />
  )
}

当我第一次在搜索框中输入内容时，它似乎工作正常(查询被去抖动并且建议被正确填充)，但如果我尝试输入一个新值，第二个获取查询会按预期触发，但建议来自不显示第二个调用(并且我没有收到 react-select 显示的“正在加载...”消息)。

当我不取消调用时，问题似乎消失了(对于第一次和任何后续调用):

import React, {useState} from 'react';
import AsyncSelect from 'react-select/lib/Async';
import {search} from '../../api';

const loadSuggestions = (query, callback) => {
  return search(query)
    .then(resp => callback(resp));
};

function SearchboxTest() {
  const [inputValue, setInputValue] = useState("");

  const onChange = value => {
    setInputValue(value);
  };

  return (
    <AsyncSelect
      value={inputValue}
      loadOptions={loadSuggestions}
      placeholder="text"
      onChange={onChange}
    />
  )
}

知道发生了什么吗？任何帮助理解这个问题将不胜感激。

米；

Answer 1

我也面临同样的问题并得到了这个解决方案。

If you are using callback function, then You DON'T need to return theresult from API.

尝试删除 返回 来自 的关键字_loadSuggestions 功能。
如下所示

 import React, {useState} from 'react';
 import AsyncSelect from 'react-select/lib/Async';
 import debounce from 'lodash.debounce';
 import {search} from './api';
 
 const _loadSuggestions = (query, callback) => {
   search(query)
     .then(resp => callback(resp));
 };
 
 const loadSuggestions = debounce(_loadSuggestions, 300);
 
 function SearchboxTest() {
   const [inputValue, setInputValue] = useState("");
 
   const onChange = value => {
     setInputValue(value);
   };
 
   return (
     <AsyncSelect
       value={inputValue}
       loadOptions={loadSuggestions}
       placeholder="text"
       onChange={onChange}
     />
   )
 }