Reactjs 映射函数 - 迭代 json 对象

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 映射函数 - 迭代 json 对象

Reactjs map function - iterate json object

iteration

reactjs

map-function

react-state