React Native中useState状态更新异常：更新时取旧值而非当前值

你的问题是典型的React闭包陷阱：handleUpdate函数在组件某次渲染时创建，会捕获当时的totalPeople状态值。后续totalPeople更新后，旧的handleUpdate依然引用之前的旧值，导致更新Firestore时用的是上一次的数值。

下面给你三种可行的解决方法：

方法一：用Firestore原生增量更新（优先推荐） #

如果你的totalPeople是做增减操作（比如人数加1/减1），直接让Firestore处理数值变化，完全不依赖前端state，既解决闭包问题，还能避免并发更新导致的数据不一致：

// 记得导入increment方法
import { increment } from 'firebase/firestore';

const handleUpdate = async () => {
  try {
    await firestore()
      .collection('users')
      .doc(user.uid)
      .collection('city')
      .doc(itemId)
      .update({
        // 这里填你要增减的数值，比如+1传1，-1传-1
        people: increment(1)
      });
    console.log('更新成功');
  } catch (err) {
    console.error('更新失败:', err);
  }
}

方法二：用useRef保存最新状态值 #

把totalPeople的最新值存在ref里，每次state更新时同步ref，这样handleUpdate里取ref.current就是最新值：

import { useState, useRef, useEffect } from 'react';

const [totalPeople, setTotalPeople] = useState(0);
const totalPeopleRef = useRef(totalPeople);

// 当totalPeople变化时，同步更新ref
useEffect(() => {
  totalPeopleRef.current = totalPeople;
}, [totalPeople]);

const handleUpdate = async () => {
  try {
    await firestore()
      .collection('users')
      .doc(user.uid)
      .collection('city')
      .doc(itemId)
      .update({
        people: totalPeopleRef.current
      });
    console.log('更新成功');
  } catch (err) {
    console.error('更新失败:', err);
  }
}

方法三：用useCallback包裹更新函数 #

通过useCallback把totalPeople加入依赖项，每次totalPeople更新时，handleUpdate都会重新创建，捕获最新的state值：

import { useState, useCallback } from 'react';

const [totalPeople, setTotalPeople] = useState(0);

const handleUpdate = useCallback(async () => {
  try {
    await firestore()
      .collection('users')
      .doc(user.uid)
      .collection('city')
      .doc(itemId)
      .update({
        people: totalPeople
      });
    console.log('更新成功');
  } catch (err) {
    console.error('更新失败:', err);
  }
}, [totalPeople, user.uid, itemId]); // 必须把所有用到的外部变量都加进依赖

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