使用地图功能显示箭头时出现反应错误

Question

所以我的应用程序.js是：

import React from 'react';
import './App.css';
import Card from './users/Card';
function App() {
return (
<div className="App">
<Card />
</div>
);
}
export default App;

和卡片.js：

import React, { Component } from "react";
class Card extends Component {
render() {
const people = ["name1", "name2", "name3"];
const peopleList = people.map(person => <p>{person}</p>);
return (
{peopleList}
);
}
}
export default Card;

我收到错误：

Objects are not valid as a React child (found: object with keys {peopleList}). 
If you meant to render a collection of children, use an array instead.

我做错了什么？如果我在App.js中使用地图功能，它可以正常工作。

Answer 1

简单return peopleList;

在这里演示

Answer 2

使用片段：

return <>{peopleList}</>;

完整代码：

class Card extends Component {
render() {
const people = ["name1", "name2", "name3"];
const peopleList = people.map(person => <p>{person}</p>);
return <>{peopleList}</>;
}
}

演示：代码沙盒