Извлеченные данные из Rest API не отображаются в браузере в React

Question

Я пытаюсь получить данные или, в данном случае, шутку из отдыха api , выполнив xhlhttprequest. Шутка - это единый объект. Я добавляю одиночную шутку в массив состояний, который я инициализировал. Однако шутка не отображается в браузере, а в консоли никаких ошибок не появляется. В части рендеринга я попытался перебрать один массив объектов, который должен был быть создан после каждого вызова. Может кто-нибудь сказать мне, в чем проблема и почему она не отображается в браузере?

import React from 'react';


 class DadJokesApi extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isLoaded: false,
            error: null,
            jokes: []
        }
    }
 componentDidMount() 
 { 
     this.getData() 
}

 getData() { 
     var xhr = new XMLHttpRequest() 
     xhr.addEventListener('load', () => { 
         if(xhr.readyState === 4){
             if(xhr.status === 200){
                 var response = xhr.responseText,
                 json = JSON.parse(response);

                 this.setState( prev =>({
                    isLoaded: true,
                    jokes: [...prev.jokes,json]

                 }))

             } else {
                 this.setState({
                     isLoaded: true,
                     error: xhr.responseText
                 })
             }
         }
      }) 
     xhr.open('GET', ' https://sv443.net/jokeapi/v2/joke/any', true) 
     xhr.send();
    }
    render() { 
        var body;
        if(!this.state.isLoaded){
            body = <div>...Loading</div>;
        } else if (this.state.error) {
            body = <div>Error occurred { this.state.error} </div>
        } else {
            var jokes = this.state.jokes.map(
                joke => <div key={joke.id} className="jokesdisplay">{jokes}</div>
            );
            body = <div>{jokes}</div> 
        }
    return body;
     }
    }
    export default DadJokesApi;

Answer 1

Это потому, что вы пытаетесь отобразить jokes внутри div:

<div key={joke.id} className="jokesdisplay">
  {jokes}
</div>

Что не будет работать, поскольку шутки не определены, но вы также не можете использовать здесь шутку, так как вы не можете отображать объекты внутри React компонентов. То, что вам нужно сделать, это визуализировать текст внутри joke объекта, например,

<div key={joke.id} className="jokesdisplay">
  {jokes.setup}
</div>

Answer 2

Здесь что-то не так:

            var jokes = this.state.jokes.map(
            joke => <div key={joke.id} className="jokesdisplay">{jokes}</div>

Вы не должны ссылаться на {шутки} внутри обратного вызова карты, это должно быть что-то вроде {joke.text}

Answer 3

Вы рендерите все шутки {jokes} (то есть undefined) внутри каждого div. Вам нужно просто поставить setup и delivery (или что вам нужно) одной шутки в div.

Вместо:

<div key={joke.id} className="jokesdisplay">
  {jokes}
</div>

Использование:

<div key={joke.id} className="jokesdisplay">
  {joke.setup} {joke.delivery}
</div>

Теперь полный метод render может выглядеть следующим образом:

render() {
  var body;
  if (!this.state.isLoaded) {
    body = <div>...Loading</div>;
  } else if (this.state.error) {
    body = <div>Error occurred {this.state.error} </div>;
  } else {
    var jokes = this.state.jokes.map(joke => (
      <div key={joke.id} className="jokesdisplay">
        {joke.setup} {joke.delivery}
      </div>
    ));
    body = <div>{jokes}</div>;
  }
  return body;
}

Я поместил рабочую версию в песочницу .