Объясните слабому, почему ничего не отображает?

Question

[rollurt]

Есть такая штука

const fetchItems = async () => {
        const data = await fetch('https://faap-app.herokuapp.com/faap/v1/rcvr_board'
        );

        const items = await data.json();
        console.log(items.items);
        setItems(items.items);
    };

Я так понял она берёт борды из ссылки для отображения на моем сайте, но при переходе на страницу где они должны отображаться пусто и вылазит такая ошибка

юпд: я мало владею пониманием того кода, что написан выше, тк переписывал его из гайда на ютабе...

и вот весь код

import React, { useState, useEffect } from 'react';
import './App.css';

function Shop() {
    useEffect(() => {
        fetchItems();
    },[]);

    const [items, setItems] = useState([]);

    const fetchItems = async () => {
        const data = await fetch('https://faap-app.herokuapp.com/faap/v1/rcvr_board'
        );

        const items = await data.json();
        console.log(items.items);
        setItems(items.items);
    };

    return (
        <div>
            {items && items.map(item => (
                <h1 key={item.itemid}>{item.name}</h1>
            ))}
        </div>
    );
}

export default Shop;

Answer 1

[Салават Салахутдинов]

По ссылке https://faap-app.herokuapp.com/faap/v1/rcvr_board вам возвращается объект в котором нет свойства "items", поэтому в items вы записываете undefined
Если я правильно понимаю items это как раз таки то что приходит в свойстве data, поэтому попробуйте заменить

const fetchItems = async () => {
  const data = await fetch('https://faap-app.herokuapp.com/faap/v1/rcvr_board'
  );

  const json = await data.json();
  setItems(json.data);
};

return (
    <div>
        {items && items.map(item => (
            <h1 key={item.id}>{item.subject}</h1>
        ))}
    </div>
);

Comments

[rollurt]

Благодарю!