React-Redux中map方法报错：Cannot read property 'map' of undefined求助

问题 #

使用React.js结合Redux开发时，尝试将NASA火星车API数据渲染为列表，出现以下错误：

• Uncaught TypeError: Cannot read properties of undefined (reading 'map')
• Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')

错误原因分析 #

1. API数据路径错误：NASA火星车API返回的结构是{ photos: [...] }，但代码中错误地尝试读取response.data.data，导致传入Redux的payload为undefined，最终products变成undefined，调用map时出错。
2. 未处理请求失败场景：当请求失败时，response会是undefined，直接调用response.data会触发错误。
3. 字段不匹配：组件中解构的title、hdurl等字段不存在于API返回的photo对象中，即使数据正确获取，也会导致渲染异常。

修复方案 #

1. 修正API数据获取与Redux dispatch逻辑（Main.js） #

import React, { useEffect } from 'react';
import axios from "axios";
import { useDispatch, useSelector } from 'react-redux';
import { setProducts } from "../../redux/actions/productActions";
import MarsRoversListing from './MarsRoversListing';

const MarsRovers = () => {
  const products = useSelector((state) => state);
  const dispatch = useDispatch();

  const fetchProducts = async () => {
    try {
      const response = await axios.get(
        "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&camera=fhaz&api_key=DEMO_KEY"
      );
      // 修正API数据路径：使用photos字段而非data
      if (response.data?.photos) {
        dispatch(setProducts(response.data.photos));
      }
    } catch (err) {
      console.log("请求错误:", err);
      // 请求失败时设置默认空数组，避免后续map报错
      dispatch(setProducts([]));
    }
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  return (
    <div className='grid container'>
      <MarsRoversListing />
    </div>
  )
}

export default MarsRovers

2. 修正列表组件的字段解构与空值保护（List.js） #

import React from 'react';
import { useSelector } from "react-redux";

const MarsRoversListing = () => {
    // 使用可选链+默认空数组，避免state结构异常或数据未加载时出错
    const products = useSelector((state) => state.allProducts?.products || []);
    
    // 确保products为数组后再调用map
    const renderList = products.map((product) => {
        // 匹配NASA火星车API返回的实际字段
        const { id, img_src, earth_date, rover } = product;
        return (
            <div className="four columns wide" key={id}>
                <div className="ui">
                    <div className="card">
                        <div className="image">
                            <img src={img_src} alt={`火星车拍摄于${earth_date}`} />
                            <div className="content">
                                <div className="header">{rover.name}</div>
                                <div className='date'>拍摄日期: {earth_date}</div>
                                <div className='rover-name'>探测器: {rover.name}</div>
                                <div className='rover-status'>状态: {rover.status}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    })

    return (
        <>
            {renderList}
        </>
    )
}

export default MarsRoversListing

3. 确认Redux Store的reducer配置 #

确保你的store配置中，productReducer通过allProducts键注册，与组件中useSelector的路径对应：

// store.js示例
import { createStore, combineReducers } from 'redux';
import { productReducer, selectedProductsReducer } from './reducers/productReducer';

const rootReducer = combineReducers({
  allProducts: productReducer, // 键名需与组件中state.allProducts对应
  selectedProduct: selectedProductsReducer,
});

export const store = createStore(rootReducer);

关键修复点总结 #

• 匹配API返回的数据结构，正确提取photos数组
• 添加请求错误捕获，避免undefined传入Redux
• 组件中使用可选链和默认值，防止map调用在数据未加载或加载失败时出错
• 解构正确的字段，对应API返回的实际数据

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