React组件useEffect未执行致Redux状态未填充的问题解决

问题现象 #

• OrderScreen组件的useEffect钩子未执行，无法通过dispatch触发Redux状态填充
• 组件渲染阶段控制台出现大量变量未定义的报错
• 移除组件内所有计算逻辑后错误依然存在，仅返回简单<div>元素时，Redux状态能正常被填充

排查过程 #

1. 先剥离组件内业务计算逻辑，仅保留基础UI结构，测试后发现状态填充恢复正常
2. 逐步回加代码，确认错误触发点与组件对Redux状态的属性访问强相关
3. 检查Redux store初始状态，定位到核心问题

根因分析 #

Redux初始状态中，order对象内的嵌套对象（如shippingAddress）和数组（如orderItems）未提前定义默认值。组件渲染时直接访问这些嵌套属性（例如order.shippingAddress.city），因嵌套属性未定义触发"Cannot read properties of undefined"类报错，导致组件渲染流程中断，进而阻塞了useEffect的执行。

解决方案 #

修正Redux初始状态，为order对象内所有嵌套对象和数组设置默认空值，示例代码如下：

// 修正后的Redux初始状态
const initialState = {
  order: {
    orderItems: [],
    shippingAddress: {},
    paymentMethod: '',
    taxPrice: 0,
    shippingPrice: 0,
    totalPrice: 0
    // 根据业务需求补充其他嵌套属性的默认值
  },
  loading: false,
  error: null
};

设置默认值后，组件渲染时访问嵌套属性不会触发未定义报错，useEffect可正常执行并完成Redux状态的填充。

内容的提问来源于stack exchange，提问作者Answer