Question

我正在尝试从db.json中提取数据，并在Cards中支付。 details数组中有两个对象，因此Cards.tsx假设会生成两个SimpleCard。它抛出this.state.card.map is not a function这个错误。谁能让我知道我在哪里弄错了？

SimpleCard.tsx

class ShipmentCard extends Component {
  render() {
    return (
      <Card className="Card">
        <CardContent className="Card-Content">
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <h3 className="Card-Content__Title">
                title goes here
              </h3>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    );
  }
}

export default ShipmentCard;

Cards.tsx

import React, { Component } from "react";
import ShipmentCard from "../card/Card";

class Cards extends Component {
  state = {
    card: []
  };
  componentDidMount() {
    fetch("http://localhost:3001/details")
      .then(response => response.json())
      .then(data => {
        data.forEach((element: any) => {
          const shipments = element;
          this.setState({ card: shipments });
        });
      });
  }
  render() {
    return (
      <div>
        {this.state.card.map(card => (
          <ShipmentCard key={card.id} />
        ))}
      </div>
    );
  }
}

export default Cards;

App.tsx

const App: React.FC = () => {
  return (
    <React.Fragment>
      <CssBaseline />
      <TopMenu />
      <Cards />
    </React.Fragment>
  );
};

db.json

{
  "details": [
    {
      "id": "123",
      "name": "Heromisha",
      "services": [
        {
          "type": "customs"
        }
      ],
      "total": "1000",
      "status": "ACTIVE",
      "userId": "E222"
    },
    {
      "id": "456",
      "name": "Honda",
      "services": [
        {
          "type": "customs"
        },
        {
          "type": "insurance",
          "value": "100"
        }
      ],
      "total": "3000",
      "status": "ACTIVE",
      "userId": "E111"
    }
  ]
}

Answer 1

data似乎是纸牌阵列。

尝试更换

      .then(data => {
        data.forEach((element: any) => {
          const shipments = element;
          this.setState({ card: shipments });
        });
      });

通过

      .then(data => this.setState({card: data}));

顺便说一句，card似乎是一个奇怪的州名，也许cards会更准确。

ReactJS Map函数-迭代JSON对象

1 个答案: