reactjs - 我该如何解决 ？我收到此错误'TypeError：无法读取未定义的属性'map''我正在尝试从操作文件访问数据

Question

这是列表订单文件。这是我到目前为止创建的代码但是当我尝试映射订单时，我正在重复该错误，我不知道为什么。当我使用 Postman 尝试获取订单时，它工作得非常好，这意味着我要么丢失了代码，要么在这些代码中的某个地方出错。有没有人有想法或可以看到 porbl;em 在哪里？所以我得到的错误如下

'TypeError：无法读取未定义的属性'map''

    const { orders, loading, error } = useSelector(state => state.personalUserOrders)
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(personalORders())
    }, [ dispatch])
    
    return ( 
        <div>

<table className='tables'>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Aount</th>
                   
                    </tr>
                </thead>
                <tbody>
                    {   orders.map((order) => (
                            
                            <tr key={order._id}>
                                <td>{order._id}</td>   
                                <td>{order.sumPrice}</td>        
                            </tr>
                        ))
                    }
                </tbody>
            </table> 
        </div>
       
    )
}

export default OrdersList

OrdersActions 文件

import axios from 'axios'
import {
    REQUEST_CREATE_ORDER, SUCCES_CREATE_ORDER, FAIL_CREATE_ORDER, CLEAR_ERRORS,
    REQUEST_PERSONAL_ORDER, SUCCESS_PERSONAL_ORDER,FAIL_PERSONAL_ORDER

} from '../constants/orderConstant'


export const createOrders = (orders) => async (dispatch, getState) => { 
    try {
        dispatch({
            type: REQUEST_CREATE_ORDER
        })

        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }

        const { data } = await axios.post(`/api/orders/newOrder`, orders, config)

        console.log('Datttttta',{data})

        dispatch({
            type: SUCCES_CREATE_ORDER,
            payload: data
        })


        
    } catch (error) {
        dispatch({
            type: FAIL_CREATE_ORDER,
            payload: error.response.data.message
  
        }) 

    }
}

export const personalORders = () => async (dispatch) => { 
    dispatch({
        type:REQUEST_PERSONAL_ORDER
    })
    try {
        const { data } = await axios.get('/api/orders/personalOrders')
        dispatch({
            type: SUCCESS_PERSONAL_ORDER,
            payload: data
        })
        
    } catch (error) {
        dispatch({
            type: FAIL_PERSONAL_ORDER,
            payload: error.response.data.message
        })
        
    }

}
export const clearError=()=> async (dispatch)=>{
    dispatch({
        type: CLEAR_ERRORS
    })

}

订单缩减文件

import {
    REQUEST_CREATE_ORDER,
    SUCCES_CREATE_ORDER,
    FAIL_CREATE_ORDER,
    CLEAR_ERRORS,

    REQUEST_PERSONAL_ORDER,
    SUCCESS_PERSONAL_ORDER,
    FAIL_PERSONAL_ORDER
} from '../constants/orderConstant'


export const createNewOrderReducter = (state = {}, action) => {
    switch (action.type) { 
        case REQUEST_CREATE_ORDER:
            return {
                ...state,
                loading: true
            }
        
        case SUCCES_CREATE_ORDER:
                return {
                    loading: false,
                    orders: action.payload
            }
        
        case FAIL_CREATE_ORDER:
            return {
                loading: false,
                 error: action.payload
            }
        
        case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }
              
        default:
            return state

    }

}

export const personalOrdersReducer = (state = { orders: [] }, action) => { 
    switch (action.type) { 
        case REQUEST_PERSONAL_ORDER:
            return {
                loading: true
            }
        
        case SUCCESS_PERSONAL_ORDER:
                return {
                    loading: false,
                    orders: action.payload
            }
        
        case FAIL_PERSONAL_ORDER:
            return {
                loading: false,
                 error: action.payload
            }
        
        case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }  
        default:
            return state
    }
}

标签： reactjs

Answer 1

您尝试personalUserOrders从商店获取，但我只能orders在您的减速器中看到。

您还尝试从state.personalUserOrders Try to use this中破坏完整状态对象

    const { orders, loading, error } = useSelector(state => state)