React中n.data.map is not a function错误排查求助

错误原因 #

1. 后端返回数据格式错误：Django中直接用HttpResponse返回Python列表时，会将列表转为拼接后的字符串（比如你贴的{'symbol': 'WISH', ...}{'symbol': 'GTII', ...}这种格式），并非标准JSON数组。前端axios接收到的是字符串，不是数组，所以调用map方法时触发类型错误。
2. 前端判断逻辑无效：代码中用response.data != 0判断数据是否存在，这个逻辑完全不匹配实际返回结果——就算后端返回空数组，也不会等于0，更别说返回的是字符串了。

解决方案 #

1. 修复后端代码（Django视图） #

把HttpResponse替换为JsonResponse，确保返回标准JSON格式的数组：

from django.http import JsonResponse

def watchlist(request):
    if request.user.is_authenticated:
        dataList = list()
        for x in Tickers.objects.filter(users=request.user):
            dataList.append({'symbol':x.symbol, 'name':x.name})
        # 返回JSON数组，safe=False允许非字典类型的响应
        return JsonResponse(dataList, safe=False)
    else:
        # 未登录时返回空数组，保持格式统一，避免前端处理额外逻辑
        return JsonResponse([], safe=False)

2. 优化前端代码（Zustand Store） #

调整数据判断逻辑，同时增加异常处理，避免请求失败导致的报错：

import React from "react";
import { create } from 'zustand';
import axios from 'axios';

const watchlistStore = create((set) => ({
    stocks: [],
    filteredStocks: [],

    fetchStocks: async () => {
        console.log(`Fetching Watchlist`);
        try {
            const response = await axios.get('/watchlist');
            // 确认返回的是数组再处理
            if (Array.isArray(response.data) && response.data.length > 0) {
                const stocks = response.data.map((stock) => ({
                    symbol: stock.symbol,
                    name: stock.name,
                }));
                set({ stocks });
            } else {
                // 空数据时重置stocks
                set({ stocks: [] });
            }
        } catch (error) {
            console.error('获取自选股失败:', error);
            // 请求失败时重置数据
            set({ stocks: [] });
        }
    },
}));

export default watchlistStore;

额外说明 #

• 后端未登录状态返回空数组，而非字符串，能让前端保持统一的处理逻辑，避免额外的类型判断。
• 前端添加try/catch可以捕获请求过程中的网络错误或后端异常，防止页面崩溃。

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