API call multi when user input to search

[minhdongsss]

Hi everyone, I'm this lib to async lazy load by call API. For the load more when scroll on bottom select work great but I have issue when input data to search although I have set debounceTimeout is 1s

What is the current behavior?

• Input data -> waiting 1s -> check Network tab -> the API call multi.

What is the expected behavior?

• The API just call one when user stop input

What's your environment?

"react-select": "^3.1.1", "react-select-async-paginate": "^0.5.1",

Other information

[vtaits]

Hi. Make please example on codesandbox .

[AZagatti]

I have the same issue and the problem is my hasMore logic, I receive from backend the lastPage and page(current page), when I type for search the hasMore is true and fetch all pages, the solution for me was adding the logic in the example on documentation:

const hasMore = lastPage !== page && Math.ceil(options.length / 10) > page;

10 is the limit on the page, I hope it helps you.

[AZagatti]

Ok, the above implementation break que default page transition, when I only do this:

const loadPageOptions = async (
  q: string,
  _: any,
  { page }: { page: number }
) => {
  const data = await showPacientsRepository(page);
  const hasMore = data.lastPage !== data.page;
  const options = data.pacients
    .map((pacient) => ({
      ...pacient,
      value: pacient.id,
      label: pacient.name,
    }))
    .filter(({ label }) => label.toLowerCase().includes(q.toLowerCase()));

  console.log(options);
  console.log(hasMore);

  return {
    options,
    hasMore: q ? false : hasMore,

    additional: {
      page: page + 1,
    },
  };
};

(the right thing would be to do a full text search on the backend but it’s just an implementation to throw away XD)