Reactjs 从Rest API获取的数据不会显示在React中的浏览器中

我正试图获取数据，或者在本例中，通过XHLHTPREQUEST从rest获取一个笑话。这个笑话只有一个目的。我将一个笑话添加到我初始化的状态数组中。但是，该笑话不会显示在浏览器中，并且在控制台中不会出现错误。在渲染部分，我尝试遍历应该在每次调用后创建的单个对象数组。有人能告诉我是什么问题吗？为什么不在浏览器中渲染

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;

从“React”导入React；
类DadJokesApi扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false，
错误：null，
笑话：[]
}
}
componentDidMount（）
{ 
这个文件名为getData（）
}
getData（）{
var xhr=newXMLHttpRequest（）
xhr.addEventListener（'load'，（）=>{
if（xhr.readyState==4）{
如果（xhr.status==200）{
var response=xhr.responseText，
json=json.parse（响应）；
this.setState（prev=>({
isLoaded：是的，
笑话：[……上一篇笑话，json]
}))
}否则{
这是我的国家({
isLoaded：是的，
错误：xhr.responseText
})
}
}
}) 
xhr.open（'GET'，'https://sv443.net/jokeapi/v2/joke/any",对)
xhr.send（）；
}
render（）{
变异体；
如果（！this.state.isLoaded）{
本体=…加载；
}else if（this.state.error）{
body=发生错误{this.state.Error}
}否则{
var jokes=this.state.jokes.map(
笑话=>{笑话}
);
正文={笑话}
}
返回体；
}
}
导出默认数据；

您正在渲染每个

div

中的所有笑话

{jokes}

（未定义的

）。您只需将一个笑话的

设置

和

交付

（或您需要的任何内容）放入

div

而不是：

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

---

我将工作版本放入一个。

您正在渲染每个

div

中的所有笑话

{jokes}

（未定义的

）。您只需将一个笑话的

设置

和

交付

（或您需要的任何内容）放入

div

而不是：

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

---

我将工作版本放在一个.

中，这是因为您试图在div中呈现

笑话

：

{笑话}

这将不起作用，因为笑话是未定义的，但您也不能在这里使用笑话，因为您不能在React组件内渲染对象。您需要做的是呈现

joke

对象内部的文本，如下所示

{笑话.设置}

这是因为您试图在div中呈现

笑话

：

{笑话}

这将不起作用，因为笑话是未定义的，但您也不能在这里使用笑话，因为您不能在React组件内渲染对象。您需要做的是呈现

joke

对象内部的文本，如下所示

{笑话.设置}

这里有点问题：

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

var jokes=this.state.jokes.map(
笑话=>{笑话}

---

您不应该在映射回调中引用{crooks}，它应该类似于{crook.text}

这里有问题：

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

var jokes=this.state.jokes.map(
笑话=>{笑话}

---

您不应该在映射回调中引用{crooks}，它应该类似于{crook.text}

我可以问一下为什么您使用

XMLHttpRequest

而不使用吗？Fetch只是

XMLHttpRequest

的包装器，用户要多得多-friendly@TomOakley此特定api的文档说明，与此api通信的唯一方法是使用XMLHttpRequest。当我在控制台中记录它时，控制台中会出现笑话，我只是在浏览器中将其显示为文本时遇到问题。感谢您的澄清，我只是想检查一下不使用的原因fetch@TomOakleyNP-我以前使用过fetch、axios，但作为我学习的一部分，我想尝试一下这种方法，看看效果如何。：-）我可以问一下为什么使用

XMLHttpRequest

而不使用吗？Fetch只是

XMLHttpRequest

的一个包装器，用户数量要多得多-friendly@TomOakley此特定api的文档说明，与此api通信的唯一方法是使用XMLHttpRequest只是在浏览器中将其显示为文本时出现问题。感谢您的澄清，我只是想检查一下不使用的原因fetch@TomOakleyNP-我以前使用过fetch、axios，但作为我学习的一部分，我想尝试一下这种方法，看看效果如何。：-）