React Native下拉值变化后useState首次未更新问题

首次切换下拉选项时index始终为初始值，核心是两个问题：

• React状态更新异步+闭包捕获旧值：useEffect内的Firestore请求是异步逻辑，setIndex触发后不会立刻同步更新index变量，必须等组件完成重渲染，createObj才能拿到最新值。如果切换下拉后很快触发提交，createObj捕获的还是上一轮渲染的初始值0。
• 原有计算逻辑存在隐性bug：
  • key校验条件用了||，属于恒真判断，空值、非法key都会进入计算流程
  • 后缀直接用字符串比较大小，会出现'10' < '2'的排序错误，导致最大后缀计算不准
  • 切换到不存在的文档分类时没有重置index，会残留上一个分类的计算结果

不要提前用useEffect预计算index（预计算还会存在多端同时修改数据时key冲突的问题），直接把后缀计算逻辑放到提交动作里，提交前实时拉取最新文档计算后缀，从根源上避免状态不同步：

// 移除原有的index state和监听value的useEffect，新增提交加载状态防止重复点击
const [submitLoading, setSubmitLoading] = useState(false);

/**
 * 实时计算分类下一个可用的key后缀
 * @param {string} categoryValue 下拉选择的分类值
 * @returns {number} 下一个后缀数字
 */
const getNextCategoryIndex = async (categoryValue) => {
  if (!categoryValue) return 1;
  const prefixLen = categoryValue.length;
  const docRef = doc(db, 'users', auth.currentUser.uid, 'expense', categoryValue);
  const docSnap = await getDoc(docRef);
  // 文档不存在时第一个key后缀从1开始
  if (!docSnap.exists()) return 1;

  const recordData = docSnap.data();
  let maxSuffix = 0;
  Object.keys(recordData).forEach(key => {
    // 过滤无效key，修正原有的恒真判断
    if (key === null || key === undefined || key === '') return;
    const suffixStr = key.slice(prefixLen);
    const suffixNum = parseInt(suffixStr, 10);
    // 过滤非数字后缀，转数字后再比较大小
    if (!isNaN(suffixNum) && suffixNum > maxSuffix) {
      maxSuffix = suffixNum;
    }
  });
  return maxSuffix + 1;
};

// 提交逻辑
const handleConfirm = async () => {
  if (!value || submitLoading) return;
  setSubmitLoading(true);
  try {
    // 提交前实时计算最新后缀，永远不会拿到旧值
    const nextIndex = await getNextCategoryIndex(value);
    const newKey = `${value}${nextIndex}`;
    const newRecord = {
      [newKey]: { title, date, category: value }
    };
    await addFunc(value, newRecord);
    navigation.navigate('Home');
  } catch (err) {
    console.error('提交失败', err);
  } finally {
    setSubmitLoading(false);
  }
};

对应修改下拉和确认按钮的绑定逻辑：

<DropDownPicker
  style={{ borderRadius: 0 }}
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
/>
<TouchableOpacity
  onPress={handleConfirm}
  disabled={submitLoading}
  style={{
    width: 300,
    height: 50,
    marginTop: 20,
    borderWidth: 2,
    justifyContent: 'center',
    opacity: submitLoading ? 0.6 : 1
  }}>
  <Text style={{textAlign: 'center', color: 'black', letterSpacing: 2}}>
    {submitLoading ? '提交中...' : 'CONFIRM'}
  </Text>
</TouchableOpacity>

• 彻底解决状态不同步问题：提交时实时计算后缀，不存在闭包拿旧值、状态更新延迟的问题
• 避免key冲突：每次提交都拉取服务端最新文档计算，哪怕其他端提前写入了新数据，也不会出现重复key
• 修复原有逻辑bug：处理了空值、字符串排序、跨分类状态残留的问题
• 加了加载状态：防止用户重复点击触发多次写入

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