ReactJS – Async Auto Complete API Response Handling

Background

I am new to ReactJS and needs to create a search field with autocomplete that:

  1. Allows free type
  2. Each user input trigger API request to return a list of matching array
  3. The auto-suggestions should show the latest result

Problem

API response returns in a non-linear order; 1st request could respond later than 2nd request, this caused the State to store not the latest request.

export const SearchBar = () => {

const [state, setState] = useState({list: []})

const apiHandler = (term) => {
  axois.post('www.abc.com',term)
    .then((r)=> {setState({list: r.data})})
}

return(
...
)}

What would be the ways to resolve this?

Thank you.

26 thoughts on “ReactJS – Async Auto Complete API Response Handling”

Leave a Comment