Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
106
rated 0 times [  109] [ 3]  / answers: 1 / hits: 9056  / 3 Years ago, tue, february 2, 2021, 12:00:00

Tried to use IntersectionObserver API with Typescript, its the list with infinity scrolling.
It works without TS, but got TS errors. I'm new in TS, And don't know how to fix it.


const MyItemsList: React.FC<ItemsListProps> = (props) => {
const [page, setPage] = useState(0)
const [size, setSIze] = useState(5)

const observer = useRef()
const { isLoading, content, hasMore } = useGetContent(page, size, type)

const lastItemRef = useCallback((node) => {
if (isLoading) return
if (observer.current) observer.current.disconnect()
// Error: TS2532: Object is possibly 'undefined'.
// why it should try to use `observer.current.disconnect()` after if(observer.current) condition

observer.current = new IntersectionObserver(entries => {
//Error: TS2322: Type 'IntersectionObserver' is not assignable to type 'undefined'.
if (entries[0].isIntersecting && hasMore) {
setPage(prevPage => prevPage + 1)
}
})

if (node) observer.current.observe(node)
// Error TS2532: Object is possibly 'undefined'.
}, [isLoading, hasMore])

const itemsList = () => {
if (typeof (content) !== 'undefined') {
return content.map((item, index) => {
if (content.length === index + 1) {
return (
<li ref={lastItemRef} key={item.id}>
<ItemPreview item={item} />
</li>
)
}

return (
<li key={item.id}>
<ItemPreview item={item} />
</li>
)

})
}
return ( <div>Loading...</div> )
}
return ( <ul>{itemsList()}</ul> )
}

export default MyItemsList

Any advice how to fix TS errors?


More From » reactjs

 Answers
3

The error comes from the fact that observer.current may contain undefined, which would mean that you can't use properties or methods of observer.current, since it may not be an object. You can avoid using potentially absent properties or methods by using the optional chaining operator (?.). This should let Typescript know that if the property or method you're trying to access doesn't exist then your application won't encounter an error.


[#1849] Thursday, January 28, 2021, 3 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jenamackennac

Total Points: 304
Total Questions: 110
Total Answers: 107

Location: Ecuador
Member since Thu, Jun 4, 2020
4 Years ago
jenamackennac questions
Fri, Feb 18, 22, 00:00, 2 Years ago
Wed, Apr 21, 21, 00:00, 3 Years ago
Thu, Apr 1, 21, 00:00, 3 Years ago
;