React Native中Firebase日期显示及用户数据渲染失败求助

一、修复用户数据展示的代码问题 #

看你提供的componentDidMount代码，主要有两个关键问题导致setState无效和数据无法正常展示：

1. 回调函数的this指向错误 #

你在firebase.database().ref('Users/').on('value', function (snapshot) { ... })里用了普通函数作为回调，这里的this不再指向你的React组件实例，所以调用this.setState会失效甚至报错。改成箭头函数就能解决这个指向问题：

firebase.database().ref('Users/').on('value', (snapshot) => { 
  console.log(snapshot.val()); 
  // 现在this指向组件实例，可以正常调用setState
  const userData = snapshot.val();
  // 注意：如果Users下是多个用户的对象集合，要根据userId筛选当前用户数据
  this.setState({ users: userData[userId] }); 
});

2. 获取当前用户数据的逻辑优化 #

你现在获取的是整个Users节点的全部数据，而非当前登录用户的专属数据。应该结合之前拿到的userId，直接查询该用户的专属节点：

componentDidMount() { 
  firebase.auth().onAuthStateChanged((user) => { 
    if(user != null){ 
      const userId = user.uid; // 直接从user对象取uid，无需重复调用firebase.auth().currentUser
      // 订阅当前用户的专属数据
      firebase.database().ref(`Users/${userId}`).on('value', (snapshot) => { 
        const currentUserData = snapshot.val();
        console.log(currentUserData);
        this.setState({ 
          name: currentUserData.name, // 直接提取当前用户的name字段
          users: currentUserData // 也可以存储整个用户对象备用
        }); 
      });
    } else { 
      this.props.navigation.navigate("Loading"); 
    } 
  });
}

3. 渲染部分的细节调整 #

首先要在组件的构造函数里初始化对应的state，避免渲染时出现undefined：

constructor(props) {
  super(props);
  this.state = {
    name: '',
    users: {},
    // 其他需要的状态字段...
  };
}

然后渲染时最好加个空值判断，防止异步更新导致的报错：

<View style={styles.contain}> 
  <ProfileDetail 
    textSecond={this.state.name || '加载中...'} 
    textThird={firebase.auth().currentUser?.email || '未登录'} 
  /> 
</View>

二、在React Native中通过Firebase显示日期 #

Firebase存储日期通常有两种常见方式，对应不同的处理方法：

1. 如果存储的是Firebase自带的Timestamp类型 #

先转换成JavaScript的Date对象，再格式化显示：

// 假设从Firebase获取的日期字段是createdAt（Timestamp类型）
const firebaseTimestamp = userData.createdAt;
const date = firebaseTimestamp.toDate(); // 转换为标准Date对象
// 自定义格式显示，比如本地日期格式
const formattedDate = date.toLocaleDateString('vi-VN', { // 可指定语言，比如越南语
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
// 渲染到组件中
<Text>{formattedDate}</Text>

2. 如果存储的是毫秒时间戳（如1699999999999） #

直接用new Date()转换后格式化：

const timestamp = userData.createdAt;
const date = new Date(timestamp);
const formattedDate = date.toLocaleString(); // 使用默认格式，或自定义格式

3. 复杂格式化推荐用轻量库 #

如果需要更灵活的日期格式，推荐使用date-fns（比moment.js更轻量，适合React Native）：

• 安装依赖：npm install date-fns
• 使用示例：

import { format } from 'date-fns';
// 假设date是转换后的Date对象
const formattedDate = format(date, 'dd/MM/yyyy HH:mm'); // 自定义格式

内容的提问来源于stack exchange，提问作者Minh Tiến Phạm