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

1. id - Order number
2. items - Objects in an array with products
3. transaction_date - Transaction date

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

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

CodePudding user response：

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