Empty cards still tries to render (with solution)

Question

Empty cards still tries to render (with solution)

mattproch opened this issue 4 years ago · comments

Hey, I use this swiper with search results. If there is none (so this.props.results is []) or even if I manually do cards={[]} it still tries to render some and throw an error TypeError: undefined is not an object (evaluating result.id)

I did some digging and the problem should be in renderStack method cause it does not do any validation of indexes. All it does is checking swipedAllCards but that is probably not actually valid before first swipe. So in constructor (my version line 48) should be something like swipedAllCards: props.cards.length === 0 instead of swipedAllCards: false. Or probably something more stronger because of Maps, Sets etc.

My solution for now is just not render the swiper at all if my results are empty but that is kind of ugly.

Arnav Chakravarthy · Answer 1 · Sun May 03 2020 18:48:28 GMT+0800 (China Standard Time)

Hi @mattproch,
I am having the same issue. I figured it is because of the Card Index. It initializes it with the maximum Card Index equal to the initial size of the cards Array. And if any element is deleted from cards Array or updated, it iterates over the same range of card indices, hence it will return undefined for items no longer present in Cards Array.

Were you able to find a fix?

Abdul Manaf · Answer 2 · Mon Jul 13 2020 16:19:32 GMT+0800 (China Standard Time)

Same problem here, I just create a pr for this. #318

M H · Answer 3 · Mon Aug 24 2020 07:41:24 GMT+0800 (China Standard Time)

PR #318 is yet to be merged in and it doesn't seem to fix this issue. A 'hacky' fix that I found to work is to set the key of the swipe component to be the stringified value of the cards. Any changes then forces a component remount and re-render. This results in the correct deck size being used.