search

alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.57k stars 464 forks source link

Empty cards still tries to render (with solution) #295

Open mattproch opened 4 years ago

mattproch commented 4 years ago

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.

arnavc1712 commented 4 years ago

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?

nafplann commented 4 years ago

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

alhabibhasan commented 4 years ago

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.