如何条件声明useState初始值，避免payGroup数据访问undefined报错

错误根因 #

报错本质是异步数据获取的时序问题，以及初始状态的结构缺失：

• 组件首次渲染时，API请求还未返回，Redux store 中 newHotProductGroups 的初始值大概率是 undefined 或者没有 Groups 属性的空对象，直接访问 .Groups[0].Products 就会触发 undefined 读取属性的报错。
• 使用 hotProductList 不报错，是因为你在 reducer 中给对应状态设置了兜底初始值（比如空数组）。

解决方案 #

1. 补全 Reducer 初始状态结构

把 productReducer 中 newHotProductGroups 的初始值设置为符合预期的兜底结构，从根源避免属性访问时报错：

// reducer 初始值示例
const initialState = {
  hotProduct: [],
  newHotProductGroups: {
    Groups: []
  }
}

2. useState 初始化加访问兜底

使用可选链 + 逻辑或设置默认值，避免属性不存在时抛出异常：

const [homeHotProductList, setHomeHotProductList] = useState(
  hotProductGroup?.Groups?.[0]?.Products || []
);

3. 同步异步更新后的状态

useState 的初始值仅在组件首次渲染时生效，API请求返回后 Redux 中的 hotProductGroup 更新，组件不会自动更新本地的 homeHotProductList，需要配合 useEffect 监听变化同步：

useEffect(() => {
  const products = hotProductGroup?.Groups?.[0]?.Products;
  if (products) {
    setHomeHotProductList(products);
  }
}, [hotProductGroup]);

优化建议

如果 homeHotProductList 不需要在组件内做独立的本地修改，完全可以直接使用 useSelector 取到的 hotProductGroup 衍生值，不需要额外声明本地 state，减少冗余状态维护成本。

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