如何使用 ReactJS 和 useState 正确绘制数据？

Question

我遇到了一个问题，我无法以任何方式解决它。

我的数据库中有一个订单表： 数据库中的表

1. id - 订单号
2. items - 包含产品的数组中的对象
3. transaction_date - 交易日期

在控制台中，我得到一组对象代码和控制台

但是我不知道如何正确将useState写入钩子，以便我可以像在页面上的数据渲染截图中的示例中那样绘制信息

我将非常感谢您的提示

代码：

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>
  )
}

来自服务器的响应：

[
    {
        "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"
    }
]

Answer 1

尝试告诉我它是否有效，我总是这样做以将数据保存在状态

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>
  )
}