TypeError：无法在 MERN Stack Quiz App 上读取未定义的属性（读取“地图”）

大家好，

我正在尝试使用 MERN 堆栈构建一个测验应用程序。 尽管一切正常，但无法访问问题列表，因为它会抛出类型错误：无法读取未定义的属性（读取“地图”）。

我目前在两个组件 JavaScript 文件中使用 map() 函数：Questions.js 和 ResultTable.js。

如果你能指导我，那将是很大的帮助。

提前致谢！ :)

问题.JS

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'


/** Custom Hook */
import { useFetchQestion } from '../hooks/FetchQuestion'
import { updateResult } from '../hooks/setResult'


export default function Questions({ onChecked }) {

    const [checked, setChecked] = useState(undefined)
    const { trace } = useSelector(state => state.questions);
    const result = useSelector(state => state.result.result);
    const [{ isLoading, apiData, serverError}] = useFetchQestion() 

    const questions = useSelector(state => state.questions.queue[state.questions.trace])
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(updateResult({ trace, checked}))
    }, [checked])
    
    function onSelect(i){
        onChecked(i)
        setChecked(i)
        dispatch(updateResult({ trace, checked}))
    }


    if(isLoading) return <h3 className='text-light'>isLoading</h3>
    if(serverError) return <h3 className='text-light'>{serverError || "Unknown Error"}</h3>

  return (
    <div className='questions'>
        <h2 className='text-light'>{questions?.question}</h2>

        <ul key={questions?.id}>
            {
                questions?.options.map((q, i) => (
                    <li key={i}>
                        <input 
                            type="radio"
                            value={false}
                            name="options"
                            id={`q${i}-option`}
                            onChange={() => onSelect(i)}
                        />

                        <label className='text-primary' htmlFor={`q${i}-option`}>{q}</label>
                        <div className={`check ${result[trace] == i ? 'checked' : ''}`}></div>
                    </li>
                ))
            }
        </ul>
    </div>
  )
}

RESULT_TABLE.JS

import React, { useEffect, useState } from 'react'
import { getServerData } from '../helper/helper'

export default function ResultTable() {

    const [data, setData] = useState([])

    useEffect(() => {
        getServerData(`${process.env.REACT_APP_SERVER_HOSTNAME}/api/result`, (res) => {
            setData(res)
        })
    })

  return (
    <div>
        <table>
            <thead className='table-header'>
                <tr className='table-row'>
                    <td>Name</td>
                    <td>Attemps</td>
                    <td>Earn Points</td>
                    <td>Result</td>
                </tr>
            </thead>
            <tbody>
                { !data ?? <div>No Data Found </div>}
                {
                    data.map((v, i) => (
                        <tr className='table-body' key={i}>
                            <td>{v?.username || ''}</td>
                            <td>{v?.attempts || 0}</td>
                            <td>{v?.points || 0}</td>
                            <td>{v?.achived || ""}</td>
                        </tr>
                    ))
                }
                
            </tbody>
        </table>
    </div>
  )
}

在未定义或空的对象上调用 map() 函数时，会出现错误“TypeError: Cannot read properties of undefined (reading 'map')”。在您的情况下，错误来自 Questions.js 和 ResultTable.js 文件，分别尝试访问选项和数据对象上的“map”方法。

在 Questions.js 文件中，questions 对象被定义为 state.questions.queue[state.questions.trace]，如果状态设置不当，它可能是未定义的。因此，您应该在访问选项对象之前添加一个空检查，如下所示：

{
    questions?.options && questions?.options.map((q, i) => (
        <li key={i}>
            <input 
                type="radio"
                value={false}
                name="options"
                id={`q${i}-option`}
                onChange={() => onSelect(i)}
            />

            <label className='text-primary' htmlFor={`q${i}-option`}>{q}</label>
            <div className={`check ${result[trace] == i ? 'checked' : ''}`}></div>
        </li>
    ))
}

同样，在ResultTable.js文件中，你也应该在访问它的map()方法之前检查数据对象是否被定义。您可以修改代码如下所示：

{data && data.map((v, i) => (
    <tr className='table-body' key={i}>
        <td>{v?.username || ''}</td>
        <td>{v?.attempts || 0}</td>
        <td>{v?.points || 0}</td>
        <td>{v?.achived || ""}</td>
    </tr>
))}

通过添加这些空检查，您可以避免代码中的 TypeError: Cannot read properties of undefined (reading 'map') 错误。