React react-spring卡牌动态映射cards数组后无法重置问题

卡牌滑完不重置，是两个低级错误导致的：

• 闭包脏值：你写的useState+useEffect生成cards的逻辑是异步执行的，useSprings初始化、手势事件绑定的时候，拿到的还是cards初始的空数组，后面判断gone.size === cards.length永远是和长度0比，重置逻辑根本触发不了。
• 索引错位：渲染卡牌时props.map取的i是0开始的数组下标，手势回传的index也是这个下标，如果你往cards里塞非连续的业务id，gone集合存的下标和cards元素对不上，长度判断自然失效。

完全没必要用state存cards，直接同步从cardData生成就行，改完和硬编码版本行为完全一致：

1. 删掉硬编码的const cards = [1, 2, 3, 4]，同时删掉你注释掉的那堆useState、useEffect生成cards的冗余代码
2. 在Swipe组件里直接同步生成cards数组：

const cards = cardData.map(item => item.id);

3. 如果你的cardData是异步从接口拉的，加个加载态，等cardData返回、cards生成后再渲染卡牌列表，别让useSprings初始化时拿到错误的数组长度。

原来的重置逻辑不需要改，这时候cards.length是真实的卡牌总数，所有卡牌滑出后就能正常触发重置，堆牌自动归位。

内容的提问来源于stack exchange，提问作者ABpositive