Question

我正在调用fetchData（url）来检索json数据。我的API数据格式如下：第1页页面大小：100 页数：5 总记录数：600 项目： 0：{ 编号：1 主题：ACC } 1：{…}

我的反应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;

它总是返回“加载项目时出错”。 Items数组始终为空。但是，如果我将api网址复制并粘贴到浏览器中，则可以正常工作。不确定我的代码有什么问题吗？谢谢。

Answer 1

response.Items.json（）

此行将引发错误，因为当您访问响应时，它只是将其转换为JSON格式之前的字符串

使用

response.json（）

然后，我将@Kabbany的答案更改为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
      })

Answer 2

我认为它应该像这样：

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}));

在React中获取API数据

2 个答案: