[ad_1]
I have an application that is essentially a search with dropdown filters. The idea is to make them seamless with no buttons. When a user reaches the bottom of the page, fetchBooks
is called again, except this time it adds on to the list instead of replacing it wholesale. Inversely, if a user types something else in or chooses a different dropdown option, the idea is to use all the selections (which are now parts of the state) to construct an API query with params and get a whole new set which can then increase in size as a user traverses it.
Upon render, there are several state variables that are created via useState()
.
const bookTitle, setBookTitle = useState()
const isFiction, setIsFiction = useState()
I’m using our homegrown component library to implement the dropdowns but they have simple controls – onChange, initialValue – nothing crazy.
I’m using something similar to detect if a user reaches the end of the list:
useEffect(() => {
const onScroll = function () {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
fetchBooks(true) // true indicates we want to add to the list
}
}
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [])
The problem is that whenever fetchBooks
is called the second time around, all of the values of dropdowns stored in state are undefined
. I could try to modify the code not to identify too much but that’d be a bit of a project.
My question is – does this ring any bells? Why would a function that exists in the same context of one component see stored state variables as undefined
?
[ad_2]