为什么显示 Uncaught TypeError：无法读取未定义的属性（读取“地图”），但是当我重新加载页面时，它可以工作文件

Question

这是我的代码，我正在制作一个全栈应用程序，用户提出问题，人们可以来回答这些问题，但由于某种原因，我的代码不起作用，我是初学者，试图通过制作这个项目来学习概念。我尝试了我所知道的一切，但仍然无法解决这个问题。帮助为什么这说未捕获类型错误：无法读取未定义的属性（读取“地图”），但当我重新加载页面时，它可以工作文件

import styled from '@emotion/styled';
import React, { useEffect, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import HelpIcon from '@mui/icons-material/Help';
import axios from 'axios';
import { axiosInstance } from '../utils/axiosInstance';
import Loader from '../components/Loader';
import { useAuth0 } from '@auth0/auth0-react';
import DeleteIcon from '@mui/icons-material/Delete';
import { IconButton } from '@mui/material';
import { useGlobal } from '../context/global';
import AnswerCard from '../components/AnswerCard';

function SingleQuestionPage() {

    let { questionID } = useParams();
    let { user, isAuthenticated } = useAuth0();
    const [tempQuestionData, setTempQuestionData] = useState({});
    const navigate = useNavigate()



    useEffect(() => {
        const getSingleDefaultQuestion = async (QUESTION_ID) => {
            try {
                // let fetch = await axiosInstance.get(`/getSingleDefaultQuestion/${QUESTION_ID}`)
                // let res = await fetch.data;
                // setTempQuestionData(res)

                const [res1, res2] = await Promise.all([
                    axiosInstance.get(`/getSingleDefaultQuestion/${QUESTION_ID}`).then(function (response) {
                        setTempQuestionData(response.data[0]);
                    }).catch(function (error) {
                        console.error(error);
                    })
                ])

            } catch (error) {

            }
        }





        getSingleDefaultQuestion(questionID);


    }, [tempQuestionData])






    const deleteQuestion = async () => {
        try {
            await axiosInstance.delete(`/getSingleDefaultQuestion/delete/${tempQuestionData._id}`);
            console.log("Successfully delete from client")
            navigate("/");
        } catch (error) {
            console.log(`Error from the client side: Reason : ${error}`)
        }
    }

    useEffect(() => {
        console.log(tempQuestionData, "pls work")
    }, [])

    return (
        tempQuestionData ?
            <>
                <Whole>
                    <QuestionHeading>{tempQuestionData.heading}</QuestionHeading>
                    <AskedUser>
                        <img src={tempQuestionData.profileURL} alt="me" width={40} />
                        <span><h5>{tempQuestionData.profileName}</h5> asked this question</span>
                    </AskedUser>
                    <QuestionDescription>
                        <h1>  <HelpIcon fontSize='80' style={{ color: '#b13634' }} /> Question description</h1>
                        <p>{tempQuestionData.questionDesc}</p>



                        {
                            !isAuthenticated ? "loading..." : tempQuestionData.profileEmail === user.email ? (
                                <Bubbly onClick={deleteQuestion}>
                                    <IconDelete />
                                </Bubbly>
                            ) :
                                (
                                    <Link to={`/answerDefaultQuestion/${tempQuestionData._id}`}><OutlinedBtn>Answer</OutlinedBtn></Link>
                                )
                        }
                    </QuestionDescription>

                    {
                        !isAuthenticated || !tempQuestionData ? "loading answers...." : tempQuestionData.answers.map((ans, i) => {
                            return <AnswerCard key={i} data={ans} />
                        })
                    }

                </Whole>
            </>
            :
            <Loader />
    )
}

const Whole = styled.div`
margin: 30px 100px;
padding: 60px;
background: #f6f9f9;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

`

const IconDelete = styled(DeleteIcon)`
    
`
const Bubbly = styled(IconButton)`
margin-top: 10px;
    
`
const OutlinedBtn = styled.button`
    position: relative;
    margin-top: 30px;
    padding: 8px 25px;
    border: 3px solid #b13634;
    color: #b13634;
    font-weight: bold;
    background: transparent;
    letter-spacing: 3px;
    overflow: hidden;
   z-index: 99;
    transition: .4s;

    &&::before {
        content: "";
        position: absolute;
        top: 0;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #b13634;
        transform: translateY(100%);
        transition: .4s;
       
    }
    &&:hover::before {
        transform: translateY(0);
    }

    &&:hover {
        color: #fff;
    }
`
const QuestionHeading = styled.h1`
    font-weight: bolder;
    font-size: 50px;
    text-shadow: 0px 1px, 1px 0px, 1px 0px;
`
const QuestionDescription = styled.div`
margin-top: 50px;
h1 {
    font-weight: bolder;
    /* text-shadow: 0px .5px, .5px 0px, .5px 0px; */
    color: #b13634;
    margin-bottom: 30px;

}
`
const AskedUser = styled.div`
margin: 30px 0;
    img {
        border-radius: 50%;
        margin-right:8px;
    }
    h5 {
        display: inline;
        font-weight: bolder;
    }
    span {
        width: 10px;
    }



export default SingleQuestionPage

Answer 1

这应该对你有帮助：

(tempQuestionData.answers ?? []).map

您出现此错误是因为

tempQuestionData.answers

仍然可能是未定义的。