当我尝试将道具传递给孩子时映射不是函数错误答案

【问题标题】：Map not a function error when i'm trying to pass props to a child当我尝试将道具传递给孩子时映射不是函数错误
【发布时间】：2020-04-10 23:00:19
【问题描述】：

我对这里发生的事情一无所知：

这是子组件的代码：

import React, { Component } from "react";
import { ErrorBoundary } from "../../utils/ErrorBoundary";

class FrontCard extends Component {
  render() {
    return (
      <div>
        {console.log(this.props)}{" "}
        {this.props.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>
    );
  }
}

export default FrontCard;

这就是它的名称：

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

如您所见，我在映射之前记录了道具，并且该数组在控制台中：

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

问题是，为什么说 map 不是函数？

Uncaught TypeError: this.props.map is not a function
    at FrontCard.render (FrontCard.jsx:44)

【问题讨论】：

你的道具不是Array。这是一个object。你不能map对象。

标签： reactjs

【解决方案1】：

这是因为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>
))}

【讨论】：

【解决方案2】：

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 }

【讨论】：

【解决方案3】：

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

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

如何解决它取决于你，但我会将卡片作为道具传递给 FrontCard 组件。

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

然后你可以像这样在道具上调用地图。

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

【讨论】：

【解决方案4】：

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

<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>
    );
  }
}

【讨论】：