从Rest API提取的数据未出现在React的浏览器中

csb00 发表于 Dev

csb00

我试图通过执行xhlhttprequest来获取数据，或者在这种情况下，是来自rest api的一个玩笑。这个笑话是一个单一的对象。我将获取的单个笑话添加到初始化的状态数组中。但是，该笑话没有显示在浏览器中，并且在控制台中，没有出现错误。在渲染部分，我尝试遍历应该在每次调用之后创建的单个对象数组。有人可以告诉我问题是什么，为什么它不能在浏览器中呈现？

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;

twharmon

要渲染所有的笑话{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;
}

我将工作版本放在沙盒中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。