【问题标题】：Creating a table in React from JSON inputed from Flask从 Flask 的 JSON 输入在 React 中创建一个表
【发布时间】：2020-03-11 12:45:09
【问题描述】：

我正在尝试根据从我的烧瓶应用程序获得的响应在 React 中创建一个表格。我正在使用的代码如下。请问有人可以帮我吗？我不确定从哪里开始以及如何做。

import React, { Component } from "react";
import { render } from "react-dom";
import axios from "axios";

class Data extends Component {
    constructor() {
    super();
    this.state = {
        products: ""
    };
}
componentDidMount() {
    this.getDataAxios();
}

async getDataAxios() {
    const response = await axios.get("http://141.123.1:5000/product");
    this.setState({ products: response.data });
}

render() {
    return (
        <div>
            <h1>response data</h1>
        </div>
    );
    }
}
export default Data;

来自本地服务器的输入是：

"products": [
      {
        "action": "update",
        "id": 2,
        "object_identifier": 20,
        "object_type": "meal",
        "s3_location": "location-110"
      },
      {
        "action": "update",
        "id": 3,
        "object_identifier": 20,
        "object_type": "meal",
        "s3_location": "location-120"
      },
      {
        "action": "update",
        "id": 4,
        "object_identifier": 60,
        "object_type": "meal",
        "s3_location": "location-1120"
      },
      {
        "action": "update",
        "id": 5,
        "object_identifier": 70,
        "object_type": "meal",
        "s3_location": "location-1323120"
      }
]

作为一个额外且相当厚颜无耻的问题，我现在不确定如何在不使用 Moesif CORS 的情况下让我的烧瓶休息 api 工作。有人知道方法吗？

非常感谢您一如既往的帮助。

//A

【问题讨论】：

标签： javascript json reactjs

【解决方案1】：

如果存在则映射数据

render() {
    return (
        <div>
            <h1>response data</h1>
            {this.state.products && this.state.products.length > 0 && this.state.products.map(product => <Product {...product} />)}
        </div>
    );
    }
}

制作一个渲染 1 个产品的 Product 组件并将其放入此处。然后用从数组的每次迭代中获得的数据填充它。

【讨论】：