React使用useSelector取Redux数据返回undefined报map错误求助

核心问题排查方向 #

• 1. Reducer初始状态配置错误
     你没有贴productList对应的reducer代码，90%的概率是你的reducer没有给products设置默认空数组，或者根reducer注册时的字段名和useSelector取值的字段不匹配。
     正确的reducer配置示例：

  // productReducers.js
  import {
    PRODUCT_LIST_FAILURE,
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
  } from "../Constants/productConstants";
  
  // 必须给products设置初始空数组
  const initialState = {
    loading: false,
    products: [],
    error: null
  }
  
  export const productListReducer = (state = initialState, action) => {
    switch(action.type) {
      case PRODUCT_LIST_REQUEST:
        return { ...state, loading: true }
      case PRODUCT_LIST_SUCCESS:
        return { ...state, loading: false, products: action.payload }
      case PRODUCT_LIST_FAILURE:
        return { ...state, loading: false, error: action.payload }
      default:
        return state
    }
  }
  

  根reducer注册时必须保证字段名一致：

  // rootReducer.js
  import { combineReducers } from 'redux'
  import { productListReducer } from './productReducers'
  
  export default combineReducers({
    // 这里的key必须和useSelector中state.productList的key完全一致
    productList: productListReducer
  })
  

• 2. 异步请求时序问题
     dispatch(listProducts())是在组件挂载后才触发的异步请求，首次渲染时请求还未返回，此时products还未被赋值，如果没有默认值就会是undefined，直接调用map方法就会抛出报错。
• 3. Action代码存在语法错误
     你给出的action代码中，错误分支的dispatch漏写了type字段，会导致错误状态无法被reducer正确接收：
     原错误代码：

  dispatch({ PRODUCT_LIST_FAILURE, payload: error });
  

  修正为：

  dispatch({ type: PRODUCT_LIST_FAILURE, payload: error });
  

修复方案 #

1. 按照上面的示例修正reducer配置，保证products有默认空数组、根reducer字段名正确
2. 在渲染层增加防御性判断，避免空值调用方法，也可以补充加载、错误状态的提示：

const dispatch = useDispatch();
const productList = useSelector((state) => state.productList);
// 把loading、error也取出来做状态提示
const { loading, error, products } = productList;

useEffect(() => {
  dispatch(listProducts());
}, [dispatch]);

// 先处理加载、错误状态
if (loading) return <div>商品加载中...</div>
if (error) return <div>商品加载失败，请稍后重试</div>

return (
 <div>
   {/* 也可以用可选链做兜底：products?.map */}
   {products.map((data, id) => {
     return (
       <div className="product_div" key={id}>
         <Products data={data} />
       </div>
     );
   })}
 </div>
)

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