React Native中首次调用updateNotes无法更新notes状态的解决方法

问题现象 #

开发AddNote组件时，首次调用updateNotes函数后，notes状态输出为空数组，必须点击两次按钮（先调用updateNotes更新本地状态，再调用update同步云端）才能将有效值同步到Firestore。当前通过两个按钮分开处理，希望合并为一次操作完成状态更新与云端同步。

问题原因 #

React的useState是异步更新机制，调用setNotes后，notes变量不会立即更新为最新值。直接在setNotes后使用notes调用updateDoc，传入的是更新前的旧状态值（初始为空数组），导致云端同步失败。

修复方案 #

方案1：直接使用新构造的数组同步云端 #

在updateNotes中先构造好新的notes数组，既用于更新本地状态，也直接传入updateDoc，避免依赖异步更新后的notes状态。

修改后的核心代码：

async function updateNotes() {
  if (title === '' || detail === '') {
    console.warn('Each input must have a value');
    return;
  }
  
  // 构造新的note对象和完整notes数组
  const newNote = { title: title, details: detail, color: color };
  const newNotes = [...notes, newNote];
  
  setId(prev => prev + 1);
  setNotes(newNotes);
  
  // 直接用新数组同步云端
  try {
    await updateDoc(docRef, { notes: newNotes });
    console.log('UPDATED');
    navigation.navigate('Notes');
  } catch (error) {
    console.error('更新失败:', error);
  }
}

合并UI按钮，只保留一个操作按钮：

<View style={styles.bottomContainer}>
  <View style={[styles.buttonContainer, {backgroundColor: '#00bfff'}]}>
    <Pressable android_ripple={{color: '#d9d9d9'}} onPress={updateNotes}>
      <FontAwesome style={styles.icon} name='send' size={40}/>
    </Pressable>
  </View>
</View>

方案2：使用useEffect监听状态变化同步云端 #

启用你注释掉的useEffect，监听notes状态变化，待状态更新完成后自动同步到云端，适合状态更新后需执行多步操作的场景。

修改后的完整组件代码：

import { Pressable, StyleSheet, Text, View, TextInput } from 'react-native'
import { Entypo } from '@expo/vector-icons'; 
import { FontAwesome } from '@expo/vector-icons'; 
import React, {useEffect, useState} from 'react'

import { doc, updateDoc } from 'firebase/firestore';
import { db } from '../firebase';

const AddNote = ({navigation, route}) => {
  const [title, setTitle] = useState('');
  const [detail, setDetail] = useState('');
  const [color, setColor] = useState('#d4ff9b');
  const [id, setId] = useState(0);
  const [notes, setNotes] = useState([]);

  const docRef = doc(db, 'users', route.params.docId)

  // 监听notes变化，自动同步云端
  useEffect(() => {
    // 初始空数组不执行同步
    if (notes.length === 0) return;
    
    updateDoc(docRef, { notes })
      .then(() => {
        console.log('Updated');
        navigation.navigate('Notes');
        // 清空输入框
        setTitle('');
        setDetail('');
      })
      .catch(error => console.error('更新失败:', error));
  }, [notes]);

  async function updateNotes() {
    if (title === '' || detail === '') {
      console.warn('Each input must have a value');
      return;
    }
    
    setId(prev => prev + 1);
    setNotes(prev => [...prev, {title: title, details:detail, color:color}]);
  }

  return (
    <View style={styles.noteContainer}>
      <View style={styles.titleContainer}>
        <TextInput style={styles.title} value={title} onChangeText={setTitle} />
      </View>
      <View style={styles.detailsContainer}>
        <TextInput style={styles.details} value={detail} onChangeText={setDetail} multiline />
      </View>
      
      <View style={styles.bottomContainer}>
        <View style={[styles.buttonContainer, {backgroundColor: '#00bfff'}]}>
          <Pressable android_ripple={{color: '#d9d9d9'}} onPress={updateNotes}>
            <FontAwesome style={styles.icon} name='send' size={40}/>
          </Pressable>
        </View>
      </View>
    </View>
  )
}

说明 #

• 方案1逻辑直接，无额外监听开销，适合单次状态更新后立即同步的场景。
• 方案2依赖React副作用机制，确保状态稳定后执行同步，逻辑更清晰，适配复杂业务流程。

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