Необходимо добавить один объект в массив, который я инициализировал в React (TypeError: Невозможно прочитать свойство 'map' из неопределенного)

Question

Я учусь использовать fetch в React и сейчас пытаюсь получить данные из rest api . Шутка сама по себе является единственным объектом в json.

{
  "id": "R7UfaahVfFd",
  "joke": "My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.",
  "status": 200
}

Я полагаю, что причина, по которой я получаю следующую ошибку TypeError: Cannot read property 'map' of undefined, заключается в том, что для меня нет массива, через который можно отобразить. Я знаю, что мне нужно добавить шутку в массив (шутки), который я инициализирую, но я изо всех сил. Я думал, что делаю это с тем, что у меня ниже, но, очевидно, это не работает. Может кто-нибудь помочь мне и объяснить, что именно я делал неправильно?

Спасибо

import React, { Component } from 'react';


class JokesApi extends Component {
    constructor(props){
        super(props);

        this.state = {
            jokes: [],
        };
    }

componentDidMount(){
    fetch('https://cors-anywhere.herokuapp.com/https://icanhazdadjoke.com/', {
        headers: {
            'Content-Type': 'appliction/json',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => this.setState({ jokes: data.jokes}))
}

    render () {
      var jokes;
        return (
            <ul>
                {jokes.map(joke => 
                  <div key={joke.id}>
                     <p>{jokes.joke}</p>
                  </div>    
                )}
            </ul>
        )
    }
}

export default JokesApi;

Answer 1

В ответе API нет поля под названием шутки. Вместо этого api просто возвращает объект с ключевой шуткой. Вам нужно добавить sh новую шутку, полученную из API, в ваш штат, т.е. jokes

componentDidMount(){
        fetch('https://cors-anywhere.herokuapp.com/https://icanhazdadjoke.com/', {
            headers: {
                'Content-Type': 'appliction/json',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => this.setState(prev => ({jokes: prev.jokes.concat(data.joke)})))
    }