错误如下:TypeError:projects.map不是函数

Question

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

我试图将我的react前端连接到我的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
});
};

Answer 1

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

projects?.map

而不是

projects.map

Answer 2

注意将项目道具作为数组数据，以便能够在其上循环(而不是null、undefined、object(。还可以使用可选的链接运算符："？">

(projects?.data) 

在create-react应用程序中启用可选链接：

如何使用Create React App和TypeScript 启用可选链接