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

Question

I am working on a MERN project and I am in the level of integration between frontend and backend with Axios. However, I am facing some issues. I am facing this error in most of my list screens:

TypeError: Cannot read property 'map' of undefined 

This is the code I am using for the 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 Code:

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

Reducers Code:

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

The idea is to loop through cars inside the DB and display them. Also, this problem is occurring in every map function whether cars or something else. FYI, the API is tested with Postman and works fine.

Answer 1

Make sure that the API data has been fetched before you attempt to loop through and render it. Try something like this:

 {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

I don't know if this is an answer or not but it solved the problem for me. So, initially in Axios request, it was retrieving the data in payload. But, I specified what's in payload exactly to be saved and that worked for me.

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

This worked for me just fine