gpt4 book ai didi

javascript - 从 Flask 的 JSON 输入在 React 中创建表

转载 作者:行者123 更新时间:2023-12-04 10:25:48 25 4
gpt4 key购买 nike

我正在尝试根据我从我的 flask 应用程序中得到的响应在 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 的情况下让我的 flask 休息 api 工作。有人知道方法吗?

一如既往地感谢您的帮助。

//一种

最佳答案

映射数据(如果存在)

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 组件并将其放在此处。然后用您从数组的每次迭代中获得的数据填充它。

关于javascript - 从 Flask 的 JSON 输入在 React 中创建表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60636360/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com