map()函数错误.这个部件可以进一步改进吗

Question

我是Javascript和React的新手。此代码显示错误，并且此代码可以进一步改进吗。有什么建议吗？请抽象一点，我想实现它。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
export class Projects extends Component {
static propTypes = {
projects: PropTypes.array.isRequired
};
render() {
const { projects } = this.props;
return (
<div className="projects container">
<Link to="/projects/new" className="btn">
New project
</Link>
{projects.map(project => (
<div>
<span className="language origin">
{project.languageFrom}
</span>
<span className="language destination">
{project.languageTo}
</span>
</div>
)}
</div>
);
}
};

Answer 1

在执行.map之前需要进行条件检查。此外，在循环中渲染顶部元素时，永远不要忘记向它们添加唯一键

{Array.isArray(projects) && projects.map((project,index) => (
<div key={"Key-"+index}>//or if each project contains unique I’d then add id as key instead of index like key={project.id}
<span className="language origin">
{project.languageFrom}
</span>
<span className="language destination">
{project.languageTo} 
</span>
</div>
)}

Answer 2

我认为语法有问题。试试这个

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
export class Projects extends Component {
static propTypes = {
projects: PropTypes.array.isRequired
};
render() {
const { projects } = this.props;
return (
<div className="projects container">
<Link to="/projects/new" className="btn">
New project
</Link>
{projects.map(project => (
<div>
<span className="language origin">
{project.languageFrom}
</span>
<span className="language destination">
{project.languageTo}
</span>
</div>
))}
</div>
);
}
}