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

Question

所以我的 App.js 是：

import React from 'react';
import './App.css';
import Card from './users/Card';

function App() {
  return (
    <div className="App">
      <Card />
    </div>
  );
}

export default App;

和Card.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}</>;

完整代码：

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

演示： CodeSandbox

Answer 2

简单return peopleList;

Demo here

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

React error in showing an arrow with map function

javascript

reactjs

map-function