why I get this error: map is not a function

Question

当我使用以下代码的地图功能显示newTicket时，出现错误：地图不是函数

import {
  Button,
  Dialog,
  Grid,

  Slide,
  Typography,
} from "@material-ui/core";
import React, { useContext, useEffect, useState } from "react";
import AddTicket from "./addTicket";
import useStyles from "./Style";
import { Link } from "react-router-dom";
import axios from "axios";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

function Support() {
  const [open, setOpen] = useState(false);
  const [AddTickets, setAddTickets] = useState(true);
  const [newTicket , setNewTicket] = useState("")
  // global
  // var layoutState = useLayoutState();

  
  /////////////////////////////////////////////////////////////////////////////////////////
  
  const axiosInstance = useAxiosPrivate()
  const token = localStorage.getItem("id_token")
  console.log("token",token);
  useEffect(() => {
    const fetchData = async () =>{

      try {
        const {data: response} = await axios.get("http://188.121.121.225/api/ticket/getUserTickets",{
          headers: {
            'token': `${token}` 
          },
        },);
        console.log( "show response" , response.data);
        setNewTicket(response.data )
      } catch (error) {
        console.error(error.message);
      }

    }
    fetchData();
  }, []);


  /////////////////////////////////////////////////////////////////////////////////////////




  const classes = useStyles();



  return (
    <Grid container >


      //I get newTicket correctly
      {console.log("I get newTicket correctly",newTicket)}


      //but I get an error for next line
       {newTicket.map((element) => {
        return (
            <div>{element?.title}</div>
        );
      })} 






    </Grid>
  );
}

export default Support;

我通过

正确获得了newTicket

{console.log("I get newTicket correctly",newTicket)}

但是当我对 newTicket 使用 map 函数时，我使用 Axios 从 API 获取数据，我得到一个错误：newTicket.map 不是一个函数

  {newTicket.map((element) => {
    return (
        <div>{element?.title}</div>
    );

  })}

这是我为 newTicket 获得的控制台为什么我会收到此错误？我能做什么？谢谢大家

我附上控制台的照片 1: https://i.stack.imgur.com/MztxW.jpg

Answer 1

尝试用空数组初始化状态

  const [newTicket , setNewTicket] = useState([])

然后，确保将响应数据保存到数组中，然后作为数组的副本保存到状态中。

const axiosInstance = useAxiosPrivate();
const token = localStorage.getItem("id_token");
console.log("token", token);
useEffect(() => {
    const fetchData = async () => {
        try {
            const { data: response } = await axios.get(
                "http://188.121.121.225/api/ticket/getUserTickets",
                {
                    headers: {
                        token: `${token}`,
                    },
                }
            );
            console.log("show response", response.data);

            // used to store the response data and then save into state
            let tempTicketArray = [];
            tempTicketArray.push(response.data);

            setNewTicket([...tempTicketArray]);
        } catch (error) {
            console.error(error.message);
        }
    };
    fetchData();
}, []);

Answer 2

将newTicket的初始值设为空数组而不是空字符串，如：

const [newTicket , setNewTicket] = useState([]);

why I get this error: map is not a function

why I get this error: map is not a function

reactjs

axios