这是因为map适用于数组并且您props是一个对象。您需要先将该对象转换为数组，然后再映射它。

将您的地图更改为以下内容：

{Object.keys(this.props).map((index) => (
  <Card key={index} style={{ width: "18rem" }}>
    <Card.Img variant="top" src="holder.js/100px180" />
    <Card.Body>
      <Card.Title>{this.props[index].title}</Card.Title>
      <Card.Text>{this.props[index].body} </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
))}

但更好的做法可能是执行以下操作：

• 将调用组件的方式更改为：

<FrontCard cards={this.state.cards} />

• 然后您可以将其更改map为：

{this.props.cards.map((card, index) => (
  <Card key={index} style={{ width: "18rem" }}>
    <Card.Img variant="top" src="holder.js/100px180" />
    <Card.Body>
      <Card.Title>{card.title}</Card.Title>
      <Card.Text>{card.body} </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
))}

• this.props是一个object而不是一个array。
• map函数用于迭代一个array.
• 虽然如果你想通过它，试试这个：

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key, index) {
  myObject[key] += 1;
});

console.log(myObject);
// => { 'a': 2, 'b': 3, 'c': 4 }

{0: {…}, 1: {…}, 2: {…}}

这不是一个数组，它是一个对象。组件props表示为一个对象。对象上没有地图功能。

如何解决取决于您，但我会将卡片作为props传递给 FrontCard 组件。

 <FrontCard cards={this.state.cards} />

然后你可以像这样在props上调用 map 。

this.props.cards.map((card, index) => ..

props 在 React 组件中始终是一个对象，您在这里所做的是调用mapwhich 是对象上的数组方法。试试这个：

<FrontCard card={this.state.cards} />

然后在组件中：

class FrontCard extends Component {
  render() {
    return (
      <div>
        {this.props.cards.map((card, index) => (
          <Card key={index} style={{ width: "18rem" }}>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
              <Card.Title>{card.title}</Card.Title>
              <Card.Text>{card.body} </Card.Text>
              <Button variant="primary">Go somewhere</Button>
            </Card.Body>
          </Card>
        ))}
      </div>
    );
  }
}