时间戳

首页 > 解决方案 > React JS Map TypeError：无法读取未定义的属性“地图”

javascript - React JS Map TypeError：无法读取未定义的属性“地图”

问题描述

我正在做一个 MERN 项目，我处于前端和后端与 Axios 的集成级别。但是，我面临一些问题。我在大多数列表屏幕中都面临这个错误：

TypeError: Cannot read property 'map' of undefined

这是我用于地图功能的代码：

      const carList = useSelector((state) => state.carList)


    useEffect(() => {
        if (!adminInfo) {
             history.push('/admin/login')
         }
        dispatch(listCars('', pageNumber))
    }, [
        dispatch,
        history,
        pageNumber,
    ])

        const { loading, error, cars, page, pages } = carList

return(
                                <tbody>
                                    {cars.map((car) => (
                                        <tr key={car._id}>
                                            <td>{car.companyId}</td>
                                            <td>{car.carPlate}</td>
                                            <td>{car.carModel}</td>
                                            <td>{car.color}</td>
                                            <td>{car.totalMileage}</td>
                                            <td>{car.status}</td>
                                            <td>{car.registrationDate}</td>
                                        </tr>
                                    ))}
                                </tbody>
)

Axios 代码：

export const listCars = (keyword = '', pageNumber = '') => async (
    dispatch
) => {
    try {
        dispatch({ type: CAR_LIST_REQUEST })
 
        const { data } = await axios.get(
            `http://localhost:5000/api/car/find-all-cars`
        )
 
        dispatch({
            type: CAR_LIST_SUCCESS,
            payload: data,
        })
    } catch (error) {
        dispatch({
            type: CAR_LIST_FAIL,
            payload:
                error.response && error.response.data.message
                    ? error.response.data.message
                    : error.message,
        })
    }
}

减速机代码：

export const carListReducer = (state = { cars: [] }, action) => {
    switch (action.type) {
        case CAR_LIST_REQUEST:
            return { loading: true, cars: [] }
        case CAR_LIST_SUCCESS:
            return {
                loading: false,
                cars: action.payload.cars,
                pages: action.payload.pages,
                page: action.payload.page,
            }
        case CAR_LIST_FAIL:
            return { loading: false, error: action.payload }
        default:
            return state
    }
}

这个想法是遍历数据库内的汽车并显示它们。此外，这个问题出现在每个地图功能中，无论是汽车还是其他东西。仅供参考，API 已经过 Postman 测试并且工作正常。

标签： javascriptnode.jsreactjsaxios

解决方案

在尝试循环和呈现之前，请确保已获取 API 数据。尝试这样的事情：

 {cars ? cars.map((car) => (
           <tr key={car._id}>
               <td>{car.companyId}</td>
               <td>{car.carPlate}</td>
               <td>{car.carModel}</td>
               <td>{car.color}</td>
               <td>{car.totalMileage}</td>
               <td>{car.status}</td>
               <td>{car.registrationDate}</td>
           </tr>
                  )) : ''}

推荐阅读