Помощь в передаче данных с помощью fetch в компонент

Question

Есть API-сервис fortniteapi, с которого я беру данные каждого предмета и вывожу их на сайте. Через fetch я получаю эти данные и по пропсам передаю в List, потом в Item.

При передачи данных массива в UseState (setGoods(data.shop)) я получаю только корневые данные (mainId, displayName displayDescription, displayType и т.д.), но не price. data.shop.price не работает, как мне можно вытащить цену и передать её по пропсам в мой компонент?

 "shop": [
    {
        "mainId": "Sparks_Drum_CardBoard",
        "displayName": "Картонный слэм",
        "displayDescription": "Шуршащий ритм и немножко соуса.",
        "displayType": "Комплект предметов",
        "mainType": "sparks_drum",
        "offerId": "v2:/b068b3a7b046f8e4ff9c76ae5a65c5e62b6954e160a061d91bab2faf02e8b2ae",
        "price": {
            "regularPrice": 1000,
            "finalPrice": 1000,
            "floorPrice": 1000
        }, } ]

Shop:

import React, {useEffect, useState} from 'react';
import {API_KEY, API_URL} from './config'
import {Preloader} from './Preloader'
import {GoodsList} from './GoodsList';


const Shop = () => {
    const [goods, setGoods] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(function getGoods() {
        fetch(API_URL, { 
            headers: {
                Authorization: API_KEY
            }}).then((response)=> response.json())
            .then((data) => {
                data.shop && setGoods(data.shop);
                setLoading(false)

            })
    }, []) 


        
        return (
            <main className="container content">
                {
                    loading ? <Preloader /> : <GoodsList goods={goods} />
                }
                </main>
            ) 

}
export { Shop }

List:

import { GoodsItem } from "./GoodsItem";

function GoodsList(props) {
    const {goods = []} = props;
    return <div className="goods">
        {goods.map(item => (
            <GoodsItem key={item.id} {...item}/>
        ))}
</div>}

export {GoodsList};

Item:

function GoodsItem(props) {
    const {
        mainId,
        displayName, 
        displayDescription,
        displayType,
        finalPrice,
        full_background,
    } = props;
    
    

    return (
        
  <div className="row">
    <div className="col s12 m6">
      <div className="card" id={mainId}>
        <div className="card-image">
          <img src={full_background} alt={displayName} />
          <span className="card-title">{displayName}</span>
          <span>{displayType}</span>
          <a className="btn-floating halfway-fab waves-effect waves-light red"><i className="material-icons">add</i></a> 
        </div>
        <div className="card-content">
          <p>{displayDescription}</p>
          <p>{finalPrice}</p>
        </div>
      </div>
    </div>
  </div>
            
    )
}


export {GoodsItem};

Answer 1

но не price. data.shop.price не работает, как мне можно вытащить цену и передать её по пропсам в мой компонент?

Например вот так можно вытащить и использовать...

const shop = [
    {
        "id": "нужен_id",
        "mainId": "Sparks_Drum_CardBoard",
        "displayName": "Картонный слэм",
        "displayDescription": "Шуршащий ритм и немножко соуса.",
        "displayType": "Комплект предметов",
        "mainType": "sparks_drum",
        "offerId": "v2:/b068b3a7b046f8e4ff9c76ae5a65c5e62b6954e160a061d91bab2faf02e8b2ae",
        "price": {
            "regularPrice": 1000,
            "finalPrice": 1000,
            "floorPrice": 1000
        }, 
    } 
]

function GoodsItem(props) {
    const {
        mainId,
        displayName, 
        displayDescription,
        displayType,
        full_background,
        price
    } = props;
    const {finalPrice} = price
    return (
      <div className="row">
        <div className="col s12 m6">
          <div className="card" id={mainId}>
            <div className="card-image">
              <img src={full_background} alt={displayName} />
              <span className="card-title">{displayName}</span>
              <span>{displayType}</span>
              <a className="btn-floating halfway-fab waves-effect waves-light red"><i className="material-icons">add</i></a> 
            </div>
            <div className="card-content">
              <p>{displayDescription}</p>
              <p>{finalPrice}</p>
            </div>
          </div>
        </div>
      </div>
  )
}

function GoodsList(props) {
    const {goods = []} = props;
    return <div className="goods">
        {goods.map(item => (
            <GoodsItem key={item.id} {...item}/>
        ))}
    </div>
}

const Shop = () => {
    const [goods, setGoods] = React.useState([]);
    React.useEffect(function getGoods() {
      setGoods(shop);
    }, []) 
    return (
        <main className="container content">
            {<GoodsList goods={goods} />}
        </main>
    ) 

}


const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<Shop />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Помощь в передаче данных с помощью fetch в компонент

Ответы (1 шт):