错误如下：TypeError: projects.map is not a function答案

【问题标题】：Error is as follows: TypeError: projects.map is not a function错误如下：TypeError: projects.map is not a function
【发布时间】：2021-08-20 04:04:20
【问题描述】：

[在此处输入图片描述][1]

我试图将我的反应前端连接到我的 Spring Boot 后端。我遇到了这个错误。如何解决这个问题？ *我是一个 react 和 javascript 新手，正在尝试构建一个新的应用程序。我尝试了另一个堆栈溢出的解决方案，但似乎没有任何效果。 * [1]：https://i.stack.imgur.com/vaxWI.png

import React, { Component } from "react";
import ProjectItem from "./Project/ProjectItem";
import CreateProjectButton from "./Project/CreateProjectButton";
import { connect } from "react-redux";
import { getProjects } from "../actions/projectActions";
import PropTypes from "prop-types";
import Projects from './Projects';

class Dashboard extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount() {
    this.props.getProjects();
  }



 render() {
    const { projects } = this.props.project;

return (
  <div className="projects">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Projects</h1>
          <br />
          <CreateProjectButton />
          <br />
          <hr />
          {projects.map((project) => (<ProjectItem key={project.id} project={project} ></ProjectItem>))}
        </div>
      </div>
    </div>
  </div>
);


 }
}

Dashboard.propTypes = {
  project: PropTypes.object.isRequired,
  getProjects: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  project: state.project
});

export default connect(
  mapStateToProps,
  { getProjects }
)(Dashboard);



 import React,{ useState } from 'react'
import ProjectItem from './Project/ProjectItem';

const Projects = (props) => {
    return(
        <div>
        {props.projects.map((project) => (<ProjectItem key={project.id} project={project} ></ProjectItem>))}
        </div>
    )
}

export default Projects;

//dispatch redux func

    export const getProjects = () => async dispatch => {
  const res = await axios.get("/api/projects");
  dispatch({
    type: GET_PROJECTS,
    payload: res.data
  });
};

【问题讨论】：

是 state.project.projects 始终是数组还是仅在您从后端获取数据之后？
说实话我不知道
嗯，你必须在某个地方定义初始的 redux 状态。那看起来像什么？
import { combineReducers } from "redux"; import errorReducer from "./errorReducer"; import projectReducer from "./projectReducer"; import backlogReducer from "./backlogReducer"; import securityReducer from "./securityReducer"; export default combineReducers({ errors: errorReducer, project: projectReducer, backlog: backlogReducer, security: securityReducer });
import { GET_PROJECTS, GET_PROJECT, DELETE_PROJECT } from "../actions/types"; const initialState = { projects: [], project: {} }; export default function(state = initialState, action) { switch (action.type) { case GET_PROJECTS: return { ...state, projects: action.payload }; case GET_PROJECT: return { ...state, project: action.payload }; default: return state; } }

标签： reactjs redux react-redux frontend react-thunk

【解决方案1】：

注意项目道具是一个数组数据，以便能够循环它（不是空的，未定义的，对象）。你也可以使用可选的链接操作符：'?'

(projects?.data)

在 create-react-app 中启用可选链接：

How to enable optional chaining with Create React App and TypeScript

【讨论】：

【解决方案2】：

尝试添加可选的链接运算符：'?'在点符号之前：

projects?.map

而不是

projects.map

【讨论】：

尝试替换行：{projects.map((project) => ())} 用这个： {Array.isArray(projects) && projects.map((project) => ())}
它的工作原理是我不再有错误但它不会显示任何内容