React项目报错Uncaught TypeError: Cannot read properties of undefined (reading 'map')求助

报错原因 #

报错Uncaught TypeError: Cannot read properties of undefined (reading 'map')出现在tempQuestionData.answers.map处，核心问题：

• 初始状态tempQuestionData是空对象{}，此时tempQuestionData.answers为undefined，直接调用map触发报错。
• 第一个useEffect依赖tempQuestionData，每次调用setTempQuestionData都会重新发起接口请求，导致无限循环，数据加载状态不稳定。
• 渲染判断逻辑不严谨：空对象{}会被判定为真，导致未完成加载就渲染需要answers的部分。

修复步骤 #

1. 修正初始状态与渲染判断 #

将初始状态改为null，确保未加载完成时显示Loader：

const [tempQuestionData, setTempQuestionData] = useState(null);

2. 修复useEffect的无限循环问题 #

将第一个useEffect的依赖改为questionID，避免不必要的重复请求：

useEffect(() => {
    const getSingleDefaultQuestion = async (QUESTION_ID) => {
        try {
            const response = await axiosInstance.get(`/getSingleDefaultQuestion/${QUESTION_ID}`);
            setTempQuestionData(response.data[0]);
        } catch (error) {
            console.error(error);
        }
    }
    getSingleDefaultQuestion(questionID);
}, [questionID]) // 依赖改为questionID，而非tempQuestionData

注：你原本用Promise.all包裹单个请求完全没必要，直接用await简化即可。

3. 给answers添加安全访问 #

确保answers存在再调用map，可以用空数组兜底或可选链操作符：

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

或者用可选链简化：

tempQuestionData.answers?.map((ans, i) => { ... })

4. 清理无用代码 #

删除那个空依赖的useEffect（仅在组件挂载时打印一次数据，无法跟踪变化），如果需要调试数据变化，可改为依赖tempQuestionData。

修改后的核心代码片段 #

function SingleQuestionPage() {
    let { questionID } = useParams();
    let { user, isAuthenticated } = useAuth0();
    const [tempQuestionData, setTempQuestionData] = useState(null); // 改为null
    const navigate = useNavigate()

    useEffect(() => {
        const getSingleDefaultQuestion = async (QUESTION_ID) => {
            try {
                const response = await axiosInstance.get(`/getSingleDefaultQuestion/${QUESTION_ID}`);
                setTempQuestionData(response.data[0]);
            } catch (error) {
                console.error(error);
            }
        }
        getSingleDefaultQuestion(questionID);
    }, [questionID]) // 依赖改为questionID

    // ... 其他代码不变

    return (
        tempQuestionData ?
            <>
                {/* ... 其他渲染内容 */}
                {
                    !isAuthenticated || !tempQuestionData ? "loading answers...." : 
                    (tempQuestionData.answers || []).map((ans, i) => {
                        return <AnswerCard key={i} data={ans} />
                    })
                }
            </>
            :
            <Loader />
    )
}

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