React Redux项目出现Cannot read 'map' of undefined报错如何解决

报错的根本原因是首次组件渲染时，Redux store中allProducts的products初始值为undefined：接口请求是异步操作，在接口返回数据、dispatch更新store之前，组件已经完成第一次渲染，此时对undefined调用map方法就会抛出类型错误。你看到的两次控制台打印，第一次是初始渲染的undefined，第二次是store更新后触发重渲染的正确数据。

步骤1：修正Redux reducer的初始值 #

找到你定义allProducts对应的reducer文件，确保products的初始值为空数组，不要留空或者设置为undefined：

// 示例 productReducer.js
import { SET_PRODUCTS } from '../actions/actionTypes';

// 初始状态必须明确products为空数组
const initialState = {
  products: []
};

const productReducer = (state = initialState, action) => {
  switch(action.type) {
    case SET_PRODUCTS:
      return {
        ...state,
        products: action.payload
      };
    default:
      return state;
  }
};

export default productReducer;

步骤2：增加值校验做兜底防护 #

为了避免极端情况仍出现报错，你可以在调用map前先判断取值是否为合法数组，可选两种实现：

写法1：简易兜底 #

// productComponent.jsx 替换原renderList定义即可
// 如果pdts为undefined/非数组，就用空数组兜底
const renderList = (pdts || []).map((pdt) => {
  // 原有渲染逻辑保持不变
})

写法2：增加加载状态优化体验 #

const ProductComponent = () => {
  const pdts = useSelector((state) => state.allProducts.products);

  // 数据未加载完成时显示加载提示
  if (!pdts || !Array.isArray(pdts)) {
    return <div>商品加载中...</div>
  }

  const renderList = pdts.map((pdt) => {
    // 原有渲染逻辑保持不变
  })

  return <>{renderList}</>
}

步骤3：补充接口异常处理 #

你当前的接口请求仅打印了错误日志，没有异常兜底，如果接口请求失败response会是undefined，dispatch后仍会把products设置为undefined触发报错，可修改请求逻辑：

// productListing.jsx 中的fetchProducts方法修改
const fetchProducts = async () => {
  try {
    const response = await axios.get("https://fakestoreapi.com/products");
    dispatch(setProducts(response.data));
  } catch (err) {
    console.log("Err: ", err);
    // 异常时也设置为空数组，避免后续报错
    dispatch(setProducts([]));
  }
};

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