React-Redux - TypeError：无法读取未定义的属性(读取"map")

Question

我检查了其他有错误的问题，但没有运气。我正在创建一个编辑订单屏幕。我从状态中获取订单数据并分配给tableData。当使用tableData将内容添加到表中时，我得到错误"；TypeError:无法读取未定义的属性(读取"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.orderItem.map不兼容。我可以在tableData的console.log中看到第一次呈现为空。

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

我也添加了以下代码，但仍然存在相同的问题。

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

有人能帮忙吗？请告诉我为什么在最初的console.log表中数据显示为空。如果你需要更多的细节，请告诉我

Answer 1

在第一次渲染时，使用空数组初始化tableData，然后tableData.orderItems未定义。因此，您不能在未定义的情况下使用函数映射，这就是您出现错误的原因。要修复此问题，您可以初始化tableData，如下所示：

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