React函数组件不重新执行Firebase查询，用户设置变更后页面无更新如何解决

你的代码存在4个核心问题导致无法同步更新数据：

• 你使用了Firestore的get()方法执行单次查询，无法监听后续数据库的变更
• 数据库请求直接写在组件根作用域，每次组件重渲染都会重复触发请求，没有做生命周期管理
• 调用了setLocation但没有提前声明对应的location状态变量，运行会报错
• 没有设置监听的销毁逻辑，组件卸载后会触发内存泄漏

修复后的完整代码 #

import React, { useState, useEffect } from 'react'
import { Image, StyleSheet, Text, View, ScrollView } from "react-native";

import Button from './Button'
import Background from './Background'
import { useNavigation } from '@react-navigation/native';

import { storage, store } from "../App.js";
// 若Navbar为本地组件请自行补全导入
// import Navbar from './Navbar'

export default function Dashboard(props) {
  const navigation = useNavigation();
  const user = props.route.params.user
  const [name, setName] = useState('');
  const [about, setAbout] = useState('');
  const [interests, setInterests] = useState('');
  const [image, setImage] = useState('');
  // 补全缺失的location状态
  const [location, setLocation] = useState('');

  useEffect(() => {
    const docRef = store.collection('users').doc(user.uid)
    // 用onSnapshot替代get实现实时监听
    const unsubscribe = docRef.onSnapshot((doc) => {
      if (doc.exists) {
        const docData = doc.data()
        setName(docData.name);
        setInterests(docData.interests);
        setAbout(docData.about);
        setImage(docData.photoURL)
        setLocation(docData.location)
      }
    }, (error) => {
      // 可在此处自定义错误处理逻辑
      console.log("监听用户数据失败：", error)
    });

    // 返回清理函数，组件卸载时停止监听避免内存泄漏
    return () => unsubscribe()
  // 依赖项添加user.uid，用户切换时自动重新绑定监听
  }, [user.uid])

  return (
    <Background>
    <View style={styles.container}>
    <Navbar />
      <View style={styles.info}>
        <Image source={{uri: image}} style={styles.image} />
        <Text style={styles.name}>{name}</Text>
        <View style={styles.details}>
          <Text>{location}</Text>
          <Text>{about}</Text>
          <Text>Interests: {interests}</Text>
        </View>
      </View>
    </View>
  </Background>
  )
}

// 可在此处补全你原有的样式定义
const styles = StyleSheet.create({
  container: {},
  info: {},
  image: {},
  name: {},
  details: {}
})

改动说明 #

• 用Firestore的onSnapshot方法替代原有的get()方法，只要数据库内对应文档发生变更，就会自动触发回调更新组件状态
• 将整个数据监听逻辑放到useEffect钩子内，只有依赖的用户uid发生变化时才会重新创建监听，避免重复请求
• 补全了缺失的location状态声明，避免运行报错
• 在useEffect内返回清理函数，组件卸载时自动调用unsubscribe停止监听，规避内存泄漏问题
• 移除了无用的forceUpdate导入，函数式组件不支持直接调用该方法，也不需要用到

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