为何useState无法实现数值自增？

问题出在闭包捕获的旧状态值上：

• 你的onSwipedRight/onSwipedLeft回调在组件渲染时创建，捕获的是当时的cardsIndex旧值。当这些回调异步触发时，用旧值计算cardsIndex+1，会导致更新基于过期的状态，连续触发时甚至会出现多次更新被合并、最终只生效一次的情况。
• 手动设置具体数值（比如setCardsIndex(2)）不受影响，因为它不依赖当前状态值，直接指定了新状态。

解决方法：使用函数式更新 #

给setCardsIndex传递一个函数，该函数接收当前最新的状态值作为参数，返回新的状态值。这样每次更新都会基于最新状态计算，彻底避免闭包问题：

const [cardsIndex, setCardsIndex] = useState(0);

<Card style={[styles.card, styles.card1]} key={index}
  onSwipedRight={(event) => { setCardsIndex(prevIndex => prevIndex + 1); }}
  onSwipedLeft={(event) => { setCardsIndex(prevIndex => prevIndex + 1); }}
>

函数式更新是React官方推荐的、处理依赖当前状态计算新状态的标准方式，能确保状态更新的准确性。

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