Не найдены значения из json, как исправить?

Question

[Алексей Яковлев]

Создал файл db.json, запустил сервер - json-server db.json
Получаю данные с помощью fetch:

import React from 'react';

import { Header, ToUsers, Activity } from './components';

function App() {
  const [activitys, setActivitys] = React.useState([]);

  React.useEffect(() => {
    fetch('http://localhost:3000/activitys')
      .then((data) => data.json())
      .then((json) => {
        setActivitys(json.activitys);
      });
  });

  return (
    <div className="app-wrapper">
      <Header items={['О комплексе', 'О компании', 'Новости', 'Медиа-банк', 'Контакты']} />
      <ToUsers />
      <Activity items={activitys} />
    </div>
  );
}

export default App;

В Activity получаю данные:

import React from 'react';

import '../styles/components/activity.sass';

import { ArrowBlackPng } from '../assets';
import { ActivityBlock } from '../components';

function Activity({ items }) {
  return (
    <div className="activity-wrapper">
      <div className="activity-wrapper__container">
        <div className="activity-wrapper__header">
          <div className="activity-wrapper-title">Текущие и будущие мероприятия</div>
          <a href="/more-activity" className="activity-wrapper-more">
            Все мероприятия
            <img src={ArrowBlackPng} alt="" />
          </a>
        </div>
        <div className="activity-wrapper__list-activitys">
            {items.map((obj) => (
                <ActivityBlock key={obj.id} {...obj} />
            ))}
        </div>
      </div>
    </div>
  );
}

export default Activity;

Ошибка - TypeError: Cannot read property 'map' of undefined

Answer 1

[profesor08]

Используй TypeScript и подобные вещи отсеются сами собой. В данный момент в items может попасть что угодно, и ошибка вылезет только во время выполнения.

Answer 2

[twoone]

fetch, в отличии от рендера react, это асинхронная операция, поэтому к моменту первого рендера items имеют значение undefined, а следовательно и метода .map также не существует. Проще всего сделать items опциональным -
function Activity({ items = []}) {}