Redux useSelector调用3次仅第3次返回数据 调用map报undefined错误

核心错误原因 #

1. Reducer状态返回逻辑错误 #

你在处理GET_PROJECTS_REQUEST action时，直接返回了仅包含isLoading: true的对象，没有保留原有state中的其他字段，导致请求触发后，redux状态里的projects字段被直接丢弃，变成undefined。这就是你调用map时报Cannot read property 'map' of undefined的直接原因。
同时GET_PROJECTS_SUCCESS的返回逻辑也存在同样问题，没有保留原有状态的其他字段，会导致error等字段丢失。

2. 列表渲染回调缺少返回值 #

你在map方法的回调函数中用花括号包裹了JSX逻辑，但没有显式写return语句，就算数据正常也无法渲染出项目列表。同时列表渲染缺少必填的key属性，会触发react控制台警告。

修复代码 #

1. 修正Reducer #

import { ActionTypes } from "../types";

const initialState = {
  projects: [],
  isLoading: false,
  error: null,
};

const projectsReducer = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.GET_PROJECTS_REQUEST: {
      // 先解构原有state，再覆盖需要更新的字段
      return {
        ...state,
        isLoading: true
      }
    }
    case ActionTypes.GET_PROJECTS_SUCCESS: {
      return {
        ...state,
        isLoading: false,
        projects: action.payload,
      };
    }
    case ActionTypes.GET_PROJECTS_FAILED:
      return {
        ...state,
        error: action.message,
      };
    default: {
      return state;
    }
  }
};

export default projectsReducer;

2. 修正组件渲染逻辑 #

import React, { useState, useEffect } from "react";
import "./Projects.scss";
import { useSelector } from "react-redux";

function Projects() {
  const projects = useSelector((state) => state.projects);
  const isLoading = useSelector((state) => state.isLoading);

  console.log('PROJECTS', projects)
  return (
    <section className="Projects" id="work">
      <h2 className="Projects__title Projects__title--portfolio">My Work</h2>
      { !isLoading ? 
        // 可选链做兜底，避免极端情况报错
        projects?.projects?.map((project, index) => (
          // 用圆括号做隐式返回，添加key属性
          <div className="Projects__portfolio" key={index}>
            <p>HELLLO</p>
            <a href={project.html_url} className={`Projects__portfolio--img${index}`}></a>
          </div>
        )) : null}
    </section>
  );
}

export default Projects;

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