React页面刷新后useEffect不执行 Redux状态为空报TypeError问题排查

核心问题1：reducer的switch语法错误 #

你将default分支写在了所有case的最前方，导致所有action触发时都会直接匹配default分支返回原始状态，后续的请求、成功、失败case完全不会被执行，这是你dispatch action后状态完全没有变化的核心原因。
修复后的reducer代码：

export const getProductFromID = (state = { loading: false, product: null, error: null }, action) => {
    switch(action.type){
        case GET_PRODUCT_REQUEST:
            return { ...state, loading: true }
        case GET_PRODUCT_SUCCESS:
            return { ...state, loading: false, product: action.payload, error: null }
        case GET_PRODUCT_FAIL:
            return { ...state, loading: false, error: action.payload }
        // default必须放在所有case之后
        default:
            return state
    }
}

同时注意两点：

• 初始状态提前声明所有用到的字段loading、product、error，避免状态字段缺失
• 每次返回新状态时用展开运算符...state合并原有状态，不会丢失未更新的字段

核心问题2：useEffect依赖项精度不足 #

你当前useEffect依赖的是整个match对象，更推荐依赖精确的match.params.id，避免路由参数变化时useEffect漏触发：

useEffect(()=>{
  // 增加id存在判断，避免参数无效时发送无效请求
  if (match.params.id) {
    dispatch(getProductDetails(match.params.id))
  }
},[dispatch, match.params.id])

核心问题3：渲染未做空值保护 #

你在渲染时直接访问product的属性，但product初始值为null，即使请求还在处理中，只要loading结束就会直接访问null的属性导致报错，需要增加空值判断：

{loading ? <Loader/> : error? <AlertMessage>{error}</AlertMessage>: product && (
  // 原有渲染逻辑保持不变
  <>
    <Row className='my-4'>
    {/* 其余代码省略 */}
    </Row>
  </>
)}

补充排查：useEffect完全不触发的问题 #

如果上述修改后还是出现useEffect内的日志不输出的情况，检查你的路由配置：

• 确认ProductDetailScreen对应的路由规则是否匹配刷新后的页面路径，比如路由是否配置为/product/:id，刷新时的路径是否包含正确的id参数
• 确认路由配置没有优先级问题，不会被其他更短的路由规则提前匹配到

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