React-Redux - TypeError：无法读取未定义的属性（读取“地图”）答案

【问题标题】：React-Redux - TypeError: Cannot read properties of undefined (reading 'map')React-Redux - TypeError：无法读取未定义的属性（读取“地图”）
【发布时间】：2022-01-14 13:22:55
【问题描述】：

我检查了其他有错误但没有运气的问题。我正在创建一个编辑订单屏幕。我从状态中获取订单数据并分配给 tableData。当使用 tableData 将内容添加到表中时，我收到错误“TypeError: Cannot read properties of undefined (reading 'map')”

const PurchaseOrderEditScreen = ({history}) => {
    const dispatch = useDispatch()

    const { id } = useParams()
    const orderId = id

    const orderDetails = useSelector( state => state.orderDetails )
    const { loading, error, order } = orderDetails

    const [tableData, setTableData] = useState([])

    useEffect(() => {

        if(!userInfo){
            history.push('/login')
        }

        if(!order || order._id !== orderId ){
                dispatch(getOrderDetails(orderId))
        }       
        
    },[dispatch, history, userInfo, orderId, order])

    return(
        <>
        {loading ? <Loader />
                    : error ? <Message variant='danger'>{error}</Message>
                    : (
            <div>
            <Table striped bordered hover responsive='md' className='table-sm mt-3' id="table-to-xls">
                        <thead>
                            <tr>
                                -----
                            </tr>
                        </thead>
                        <tbody>
                            {tableData.orderItems.map(item => (
                                    <tr key={item._id} >
                                        ------
                                    </tr>
                                ))}
                        </tbody>                        
            </Table>

如果我尝试从 order.orderItems.map(item 之类的订单向表中添加内容，它可以工作，但它不适用于 tableData.orderItems.map。我可以在第一次呈现为空的 tableData 的 console.log 中查看。

当我使用 order.orderItems.map 编写代码时，它可以工作，然后当我更改为 tableData.orderItems.map 时，它可以正常工作，没有任何错误。在代码更改 console.log 中的 tableData 有数据后，我可以看到自动渲染何时发生。但同时刷新页面时会抛出错误。

我也添加了以下代码，但仍然是同样的问题。

useEffect(()=>{
           setTableData(order)
        },[order])

任何人都可以帮助解决这个问题，让我知道为什么在最初的 console.log 表数据显示为空。如果您需要更多详细信息，请告诉我

【问题讨论】：

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

在您的第一次渲染中，您使用空数组初始化 tableData，然后 tableData.orderItems 未定义。因此，您不能在未定义的情况下使用函数映射，这就是您遇到错误的原因。要解决这个问题，您可以像这样初始化 tableData：

const [tableData, setTableData] = useState({ orderItems: [] })

【讨论】：

感谢您的回复。我累了。它没有显示错误，但数组为空。 console.log 显示“{orderItems: Array(0)}”，orderItems 数组也是空的。那么订单除了orderItems之外还有不同的数据。