如何在 React 中调试一个简单的 API

Posted 2023-03-07

【中文标题】如何在 React 中调试一个简单的 API

【英文标题】：How to debug a simple API in react

【发布时间】：2019-12-15 23:24:11

【问题描述】：

在 URL localhost:3001/swags 上有一个简单的 API，其中包含一些项目，现在我想在一个非常简单的 REACT APP 中显示它们。

这是我的 REACT 应用程序：

import React,  Component  from 'react';

class App extends Component 
  constructor(props) 
    super(props);

    this.state = 
      swags: null
    ;
  

  componentDidMount() 
    fetch('http://localhost:3001/swags')
      .then(response => response.json())
      .then(data => this.setState( swags: data ));
  

  render()         
    return (
      <div><pre>JSON.stringify(this.state, null, 2) </pre></div>
    );
  


export default App;

localhost:3000 上的输出是一个空对象

  "swags": null

邮递员在此 URL http://localhost:3001/swags 下向我显示此输出

[
    
        "id": 1,
        "title": "Item 1",
        "description": "Lorem ipsum dolor sit amet"
    ,
    
        "id": 2,
        "title": "Item 2",
        "description": "sed diam nonumy eirmod tempor"
    ,
    
        "id": 3,
        "title": "Item 3",
        "description": "takimata sanctus est Lorem ipsum dolo"
    
]

谁能解释为什么我的简单应用程序的输出是一个空对象？

【问题讨论】：

尝试在then()处理程序中打印到控制台数据，以确保实际获取数据。

或许将构造函数中 swag 的值设置为空数组 []。 this.state = swags: [] ;

首先在浏览器中调试。使用开发者工具。查看控制台。有错误吗？查看 Network 选项卡，请求和响应是否完全符合您的预期？ Dollars to donuts 说这是 ***.com/a/35553666/19068

的另一个副本

【参考方案1】：

根据您的代码。该页面将首先使用swags: null 呈现，然后调用http://localhost:3001/swags。如果您的请求成功，您将在屏幕上获得响应。如果您在屏幕上的值没有改变，则意味着 API 调用中有问题。您可以添加一个catch 块，或者您可以在 final 中打印该值，然后检查一切是否正确。

fetch('http://localhost:3001/swags')
.then(response => response.json())
.then(data => 
    console.log(data) // Check the value of data in console
    this.setState( swags: data )
)
.catch(err => 
    console.log(data) // Check if error in console
    this.setState( swags: 'API Failed' )
)

【讨论】：

这个答案很有帮助，通过控制台输出我可以调试 API 调用并看到错误只是一个限制问题。