代码之家 › 专栏 › 技术社区 › user788448

在React中获取API数据

reactjs

user788448 · 技术社区 · 6 年前

我调用fetchdata(url)来检索JSON数据。我的API数据格式如下: PageNo:1 页面化:100 页码:5 总记录计数:600 项目: 0:{ 身份证:1, 科目:ACC } 1:{ } }

我的react itemlist.js:

import React, {Component} from 'react';
class ItemList extends Component{
constructor(){
    super();
    this.state={
        Items:[],
        hasErrored: false,
        isLoading: false
    };
}
 //retrieve data using fetch
 fetchData(url){
    this.setState({isLoading: true});
    fetch(url)
    .then((response)=>{
        if (!response.ok){
            throw Error(response.statusText);
        }
        this.setState({isLoading:false});
        return response;
    })


    .then((response)=>{response.Items.json()})
    .then((Items)=>{
         this.setState({Items});

    })
    .catch(()=>this.setState({hasErrored:true}));
}
componentDidMount(){
    this.fetchData(myURL)
}

render(){
    if (this.state.hasErrored){
        return <p>There was an error loading the items</p>;
    }
    if (this.state.isLoading){
        return <p>Loading...</p>;
    }

    return(
        <div>  
        <ul>

            {this.state.Items.map((item)=>(
                <li key={item.ID}>{item.SUBJECT}</li>
            ))}
        </ul>
        </div>
    );
  }
  }
export default ItemList;

它总是返回“加载项目时出错”。项数组始终为空。但是,如果我将api URL复制并粘贴到浏览器,它就可以正常工作。不知道我的代码有什么问题?谢谢。

2 回复 | 直到 6 年前

Mosè Raguzzini 6 年前

response.items.json()。

这一行将抛出一个错误,因为当您访问响应时,在将其转换为JSON格式之前,它还只是一个字符串。

使用

JSON()

然后,我将稍微更改@kabbany answer作为response.statusText,它始终返回与错误代码相关联的一般错误消息。然而,大多数API通常会返回一些有用的、更人性化的消息。

关键是,不要抛出错误,只需抛出响应,然后在catch块中处理它,以提取正文中的消息:

fetch(url)
      .then( response => {
        if (!response.ok) { throw response } // Return the complete error response for debugging purposes
        return response.json()  //we only get here if there is no error
      })
      .then( json => {
        this.setState({Items: json.Items }); 
      })
      .catch( error => {
        () => this.setState({ hasErrored: true, error }) // Save both error flag and error detail so you can send it to tools like bugsnag
      })

-1

Kabbany 6 年前

我想应该是这样的:

fetch(url)
.then((response)=>{
    if (!response.ok){
        throw Error(response.statusText);
    }
    this.setState({isLoading:false});
    return response.json();
})
.then((resp)=>{
     this.setState({Items: resp.Items});
})
.catch(()=>this.setState({hasErrored:true}));

推荐文章