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

Question

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

TypeError: Cannot read property 'map' of undefined 

这是我用于 map function 的代码：

      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
    }
}

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

Answer 1

确保在尝试循环和渲染之前已获取 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>
                  )) : ''}

Answer 2

我不知道这是否是一个答案，但它为我解决了问题。 因此，最初在 Axios 请求中，它正在检索有效负载中的数据。 但是，我指定了要保存的有效载荷中的内容，这对我有用。

dispatch({
    type: CAR_LIST_SUCCESS,
    payload: data.car,
})

这对我来说很好