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}
    />
  )
}

当我第一次在搜索框中输入内容（查询被反跳并且建议正确填充）时，它似乎工作正常，但是如果我尝试输入新值，则会按预期触发第二个提取查询，但是来自第二个呼叫的建议不会显示（而且我没有收到反应选择显示的“正在加载...”消息）。

当我不进行电话防抖操作时，问题似乎消失了（对于第一个及以后的所有呼叫）：

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}
    />
  )
}

知道发生了什么吗？对于理解此问题的任何帮助将不胜感激。

M;

Answer 1

也许这会帮助某人。

freeze = false //mark delay 
timer //saved timer

loadAddress = async (strSearch: string) => {
   this.freeze = true //set mark for stop calls
   return new Promise(async (res, err) => { //return promise 
   let p = new Promise((res, err) => {
     if(this.freeze) clearTimeout(this.timer) //remove  prev timer 
     this.timer = setTimeout(async () => {
        this.freeze = false
        const r = await this.load(strSearch)//request
        res(r);
     }, 2000)
  })

  p.then(function (x) {
     console.log('log-- ', x);
     res(x);
  })
});
};

Answer 2

我当时也面临着同样的问题，并且得到了解决方案。

如果您使用的是回调功能，则您不需要需要返回来自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}
     />
   )
 }

Answer 3

在开始键入之前，使用防抖功能会显示loading...。要获得无缝的用户体验，请使用油门。

反应选择去抖动的异步呼叫，不显示建议

3 个答案: