React Native中出现TypeError: Cannot read property 'map' of undefined求助

错误根源 #

1. 接口数据取值错误：你提供的返回数据里，交易数组是transactions字段，但代码里取的是rsp.response，如果接口实际返回结构和你给出的一致，那ty会是undefined，rawtrans被设为undefined后，调用rawtrans.map就会触发报错。
2. 未做空值防护：接口请求失败、返回数据异常时，rawtrans可能变成undefined，直接执行map操作必然报错。
3. useEffect依赖逻辑错误：第三个处理金额正负号的useEffect依赖为空数组，只会在组件挂载时执行一次，后续transactions更新后不会重新触发，而且如果挂载时transactions状态异常，也会触发map报错。
4. 日期字段大小写不匹配：接口返回的日期字段是大写的Date，但代码里用小写item.date判断，导致分组逻辑完全失效，每个交易项前都会重复添加日期头。

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, FlatList, SafeAreaView, TouchableOpacity } from 'react-native';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const baseUrl = "MY URL";

const Alltrans = () => {
  const [rawtrans, setrawtrans] = useState([]);
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    const request = 4;
    AsyncStorage.getItem("user_email").then(email => {
      const data = JSON.stringify({
        request,
        user_email: email
      });

      const config = {
        method: "post",
        url: `${baseUrl}/get_them_transactions`,
        headers: {
          "Content-Type": "application/json"
        },
        data
      };

      axios(config)
        .then(response => {
          const rsp = response.data;
          // 修正：取正确的transactions字段，默认空数组兜底
          const ty = rsp.transactions || [];
          setrawtrans(ty);
        })
        .catch(error => {
          console.log(error);
          // 请求失败时重置为安全的空数组
          setrawtrans([]);
        });
    }).catch(err => {
      console.log("获取用户邮箱失败", err);
      setrawtrans([]);
    });
  }, []);

  useEffect(() => {
    // 空数组直接返回，避免无效处理
    if (!rawtrans || rawtrans.length === 0) {
      setTransactions([]);
      return;
    }
    const groupedbydate = [];
    let currentDate;
    // 修正日期字段为接口返回的大写Date，且只取日期部分分组
    rawtrans.forEach(item => {
      const itemDate = item.Date.split(' ')[0];
      if (itemDate !== currentDate) {
        currentDate = itemDate;
        groupedbydate.push({
          type: 'date',
          date: currentDate,
        });
      }
      groupedbydate.push({
        type: 'item',
        name: item.Customer_name || '',
        Intent: item.Intent,
        Amount: item.Amount,
        Date: item.Date,
        trx_ID: item.trx_ID,
      });
    });
    setTransactions(groupedbydate);
  }, [rawtrans]);

  useEffect(() => {
    if (!transactions || transactions.length === 0) return;
    // 不直接修改原对象，创建新数组避免状态污染
    const modifiedTransactions = transactions.map(transaction => {
      // 只处理交易项，跳过日期分组项
      if (transaction.type === 'item') {
        const amountSign = ["payment", "bill", "General"].includes(transaction.Intent) ? "-" : "+";
        return {
          ...transaction,
          Amount: `${amountSign}${transaction.Amount}`
        };
      }
      return transaction;
    });
    setTransactions(modifiedTransactions);
  }, [transactions]);

  return(
    <SafeAreaView>
      <FlatList
        data={transactions}
        scrollEnabled={false}
        renderItem={({ item }) => (
           <TouchableOpacity>
              <Card card={item} />
           </TouchableOpacity>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  )
};

export default Alltrans;

额外优化说明 #

• 移除了无用的groupedData状态，简化状态管理
• 去掉了冗余的JSON.parse(JSON.stringify(...))操作，response.data本身就是解析后的对象
• 为FlatList添加keyExtractor，避免React Native的列表项key警告
• 日期分组只提取日期部分（如2022-07-13），避免同一日期不同时间被重复分组
• 对所有异步操作添加异常捕获，确保状态始终处于安全的数组格式

内容的提问来源于stack exchange，提问作者Derrick Presley D pres