Question 353934 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – n.data.map is not a function in React

I am getting this error which may indicate the map function require arrays, while the data provided is not of the data type required.

The console output in the browser

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;

The data to be fetched /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.'}

The view in the backend:


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')
Tags:

4

Answers


  1. 0

    You return isn’t a proper JSON, you need the following fix in your Django View

    from django.http import JsonResponse

# in your main return 
return JsonResponse(dataList)
    Login or Signup to reply.
  2. 0

    response.data is supposed to be an array after parsing to JSON, so your check is incorrect.

    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
  }
    Login or Signup to reply.
  3. 0

    Make sure your endpoint returns a valid 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."
    }
]
    Login or Signup to reply.
  4. 0

    Your response.data is not automatically an Array you can map() from! You have to parse accordingly.

    const stocks = JSON.parse(response.data).map((stock) => {
    return {
        symbol: stock.symbol,
        name: stock.name,
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search