N.data.map не является функцией в React

Я получаю эту ошибку, которая может указывать на то, что функция map требует массивы, а предоставленные данные не соответствуют требуемому типу данных.

Вывод консоли в браузере

Uncaught (in promise) TypeError: n.data.map is not a function
    t watchlistStore.jsx:14
    d watchlistStore.jsx:2
    O watchlistStore.jsx:2
    E watchlistStore.jsx:2
    em watchlistStore.jsx:2
    a watchlistStore.jsx:2
    promise callback*em watchlistStore.jsx:2
    a watchlistStore.jsx:2
    n watchlistStore.jsx:2
    n watchlistStore.jsx:2
    fetchStocks watchlistStore.jsx:22
    im indexWatchlist.jsx:15
    React 3
    k scheduler.production.min.js:13
    T scheduler.production.min.js:14
    53 scheduler.production.min.js:14
    Webpack 12

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

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

    fetchStocks: async () => {
        console.log(`Fetching Watchlist`);
        const response = await axios.get('/watchlist');
        if (response.data != 0) {
            const stocks = response.data.map((stock) => {
                return {
                    symbol: stock.symbol,
                    name: stock.name,
                }
            });
            set({ stocks });
        };
    },
}));

export default watchlistStore;

Данные для извлечения /watchlist

{'symbol': 'WISH', 'name': 'ContextLogic Inc.'}{'symbol': 'GTII', 'name': 'Global Tech Industries Group, Inc.'}{'symbol': 'CCFN', 'name': 'CCFNB Bancorp, Inc.'}{'symbol': 'GAME', 'name': 'Engine Gaming and Media, Inc.'}{'symbol': 'SEMR', 'name': 'Semrush Holdings, Inc.'}

Вид в бэкенде:


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})
        return HttpResponse(dataList)
    else:
        return HttpResponse('Watchlist is empty')

Вы возвращаете не правильный JSON, вам нужно исправить следующее в вашем Django View

from django.http import JsonResponse

# in your main return 
return JsonResponse(dataList)

response.data должен быть массивом после разбора до JSON, поэтому ваша проверка неверна.

const response = await axios.get('/watchlist');

try {
  const parsedData = JSON.parse(response.data)
  // very strict check
  if (Array.isArray(parsedData) && parsedData.length > 0) {
    // map over array and call set()
  }

  } catch {
    // console.log for example
  }

Убедитесь, что ваша конечная точка возвращает корректный json:

[
    {
        "symbol": "WISH",
        "name": "ContextLogic Inc."
    },
    {
        "symbol": "GTII",
        "name": "Global Tech Industries Group, Inc."
    },
    {
        "symbol": "CCFN",
        "name": "CCFNB Bancorp, Inc."
    },
    {
        "symbol": "GAME",
        "name": "Engine Gaming and Media, Inc."
    },
    {
        "symbol": "SEMR",
        "name": "Semrush Holdings, Inc."
    }
]

Ваш response.data не является автоматически Array, из которого вы можете map()! Вы должны разбирать соответствующим образом.

const stocks = JSON.parse(response.data).map((stock) => {
    return {
        symbol: stock.symbol,
        name: stock.name,
    }
});
Вернуться на верх