React Native中Trip数据展示实现咨询：附API与前端代码

问题分析 #

你的代码存在几个关键问题导致行程数据无法正确展示：

• 前端请求时未正确传递employeeId参数，且未处理请求错误
• 前端使用trip.id作为key，但MongoDB文档的ID字段是_id
• 缺少加载状态、空数据提示和错误处理逻辑
• 后端需确保ObjectID正确导入

修正后端代码 #

确保导入mongoose的ObjectID类型，同时优化查询逻辑：

// 需先导入mongoose相关类型
const { ObjectID } = require('mongoose').Types;

app.get('/trip', async (req, res) => {
  try {
    const employeeId = req.query.user;
    // 校验employeeId是否为有效的ObjectID格式
    if (!ObjectID.isValid(employeeId)) {
      return res.status(400).json({ error: 'Invalid employee ID format' });
    }
    const empId = new ObjectID(employeeId);
    
    // 查找关联的车辆信息
    const fleet = await Fleet.findOne({ assignedDriverId: empId });

    if (!fleet) {
      return res.status(404).json({ error: '未找到该员工关联的车辆' });
    }
  
    // 根据车辆ID查询行程
    const trips = await Trip.find({ fleetAssignmentId: fleet._id });
   
    if (trips.length === 0) {
      return res.status(404).json({ message: '该司机暂无行程' });
    }

    res.status(200).json({
      message: '司机行程列表',
      trips: trips,
    });
  } catch (err) {
    console.error('获取行程失败:', err);
    res.status(500).json({
      message: '服务器内部错误',
      error: err.message,
    });
  }
});

修正前端代码 #

补充参数传递、错误处理、状态提示和正确的ID字段：

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

// 假设你已经通过登录或其他方式获取到当前员工ID
const CURRENT_EMPLOYEE_ID = '你的员工ID'; // 替换为实际获取的ID

const App = () => {
  const [trips, setTrips] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const fetchTrips = async () => {
    try {
      setLoading(true);
      setError('');
      const response = await fetch(`http://192.168.4.4:5000/trip?user=${CURRENT_EMPLOYEE_ID}`);
      
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || errorData.message || '请求失败');
      }
      
      const data = await response.json();
      setTrips(data.trips);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchTrips();
  }, []);

  if (loading) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的行程</Text>
      {error ? (
        <Text style={styles.errorText}>{error}</Text>
      ) : trips.length === 0 ? (
        <Text>暂无行程记录</Text>
      ) : (
        trips.map((trip) => (
          <Text key={trip._id} style={styles.tripItem}>{trip.tripName}</Text>
        ))
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  tripItem: {
    fontSize: 16,
    marginVertical: 8,
  },
  errorText: {
    color: 'red',
    fontSize: 16,
  },
});

export default App;

关键说明 #

1. 参数传递：前端需确保CURRENT_EMPLOYEE_ID是实际登录用户的ID，可通过登录接口返回或AsyncStorage存储获取
2. ID字段：MongoDB默认文档ID为_id，前端遍历需使用trip._id作为key
3. 错误处理：添加了请求错误捕获、状态码判断，同时展示错误提示提升用户体验
4. 加载状态：添加ActivityIndicator提示用户数据加载中
5. 跨域与真机测试：如果使用真机测试，需将API地址改为电脑的局域网IP，且确保手机和电脑在同一网络下；生产环境建议使用HTTPS接口

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