[英]How to draw data correctly using ReactJS and useState?
I ran into a problem, I can't solve it in any way.我遇到了一个问题,我无法以任何方式解决它。
I have a table of orders in my database: Table in the database我的数据库中有一个订单表: 数据库中的表
In the console I get an array of objects Code and console在控制台中,我得到一组对象代码和控制台
But I do not know how to write useState to the hook correctly, so that I can then draw the information as in the example in the screenshot Screenshot of data rendering on the page但是我不知道如何正确将useState写入钩子,以便我可以像在页面上的数据渲染截图中的示例中那样绘制信息
I will be very grateful for a hint我将非常感谢您的提示
Code:代码:
import React from 'react';
import axios from "axios";
import {Card} from "../components/Card";
export const Orders = () => {
const [orders, setOrders] = React.useState([]);
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
async function fetchData() {
try {
const {data} = await axios.get('http://localhost:4000/api/orders');
console.log(data);
//setOrders(data.reduce((prev, obj) => [...prev, obj.items]));
// setOrders(data.reduce((prev, obj) => [...prev, ...obj.items], [])); // old on mock api
setIsLoading(false);
} catch (error) {
console.log(error);
}
}
fetchData();
}, []);
return (
<div className="content">
<div className="content-header">
<h1>My orders</h1>
</div>
<div className="sneakers">
{(isLoading ? [...orders] : orders).map(item => (
<Card
key={item.id}
id={item.id}
title={item.title}
price={item.price}
image={item.image}
loading={isLoading}
/>
))}
</div>
</div>
)
}
Response from the server:来自服务器的响应:
[
{
"id": 19,
"items": "[{\"id\":3,\"title\":\"Men's Nike Blazer Mid Suede Sneakers\",\"image\":\"/img/sneakers/3.jpg\",\"price\":6},{\"id\":2,\"title\":\"Men's Nike Air Max 270 Sneakers\",\"image\":\"/img/sneakers/2.jpg\",\"price\":80}]",
"transaction_date": "26.06.2022"
},
{
"id": 21,
"items": "[{\"id\":5,\"title\":\"Men's Sneakers Under Armour Curry 8\",\"image\":\"/img/sneakers/5.jpg\",\"price\":50}]",
"transaction_date": "26.06.2022"
},
{
"id": 22,
"items": "[{\"id\":3,\"title\":\"Men's Nike Blazer Mid Suede Sneakers\",\"image\":\"/img/sneakers/3.jpg\",\"price\":6},{\"id\":7,\"title\":\"Мужские Кроссовки Jordan Air Jordan 11\",\"image\":\"/img/sneakers/7.jpg\",\"price\":70}]",
"transaction_date": "07.07.2022"
},
{
"id": 23,
"items": "[{\"id\":12,\"title\":\"Men's Nike Kyrie Flytrap IV Sneakers\",\"image\":\"/img/sneakers/12.jpg\",\"price\":100},{\"id\":9,\"title\":\"Men's Nike Lebron XVIII Low Sneakers\",\"image\":\"/img/sneakers/9.jpg\",\"price\":90}]",
"transaction_date": "07.07.2022"
}
]
try and tell me if it works, i always do this to save data in state尝试告诉我它是否有效,我总是这样做以将数据保存在状态
import React,{useState} from 'react';
import axios from "axios";
import {Card} from "../components/Card";
export const Orders = () => {
const [orders, setOrders] = useState([]);
const [isLoading, setIsLoading] = useState(true);
React.useEffect(() => {
async function fetchData() {
try {
const {data} = await axios.get('http://localhost:4000/api/orders');
setOrders(data)
setIsLoading(false);
} catch (error) {
console.log(error);
}
}
fetchData();
}, []);
if(isLoading) return <h1>...loading</h1>
return (
<div className="content">
<div className="content-header">
<h1>My orders</h1>
</div>
<div className="sneakers">
{orders && orders.map(item => (
<Card
key={item.id}
id={item.id}
title={item.title}
price={item.price}
image={item.image}
loading={isLoading}
/>
))}
</div>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.