ReactJS 应用程序无法使用 REST API 调用获取数据

Posted 2023-02-22

【中文标题】ReactJS 应用程序无法使用 REST API 调用获取数据

【英文标题】：ReactJS app is unable to fetch data using REST API call

【发布时间】：2019-03-29 07:08:28

【问题描述】：

我正在尝试开发示例 Reactjs Web 应用程序，其中尝试使用 REST API 并获取一些 json 数据。请看代码。

在 Visual Studio 中本地执行代码后，我正在检查 chrome 浏览器，但 chrome 控制台日志中没有打印任何内容。我认为，以下代码不会获取数据。我在这段代码中没有发现任何错误。有人可以帮忙指导一下吗？

我使用 axios 和 URL : https://jsonplaceholder.typicode.com/users 来获取数据

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

import axios from 'axios'

ReactDOM.render(<App />, document.getElementById('root'))
registerServiceWorker()

var element = React.createElement(
  'h1',
   className: 'greeting' ,
  'Test Welcome Message.!'
)
ReactDOM.render(element, document.getElementById('root'))
registerServiceWorker()

export default class ItemLister extends React.Component 
  state = 
    persons: []
  

  componentDidMount() 
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => 
      // Handle service success response
      console.log(response.data)

      const persons = response.data;
      this.setState( persons );
    )
  

  render() 
    return <ul>this.state. persons.map(person => <li>person.name</li>)</ul>
  

【问题讨论】：

看起来你没有渲染 ItemLister。或者这是在其他地方完成的？

您的 setState() 正在更新状态属性 persons 而不是 products。您没有看到此结果，因为您正在循环/映射 products 而不是 persons。

【参考方案1】：

试试这个。你在产品上做 .map，而不是在人身上

   componentDidMount() 
           axios.get('https://jsonplaceholder.typicode.com/users')
     .then( (data) => 
          this.setState( persons: data );
      )
   

或

  componentDidMount() 
          axios.get('https://jsonplaceholder.typicode.com/users')
      .then( response => 
           this.setState( persons: response.data );
       )
   

或者用 fetch 试试

   componentDidMount()
 fetch('https://jsonplaceholder.typicode.com/users').then(resp => resp.json()).then(data => this.setState( persons: data))
     

别忘了给 li 元素添加 key。当你像下面这样循环时，你需要向父元素添加键

  <ul>
       this.state.persons.map(person => <li key=person.id> person.name</li>)
 </ul>

如果您没有来自数据的唯一 ID，则添加索引作为键，如下所示

   <ul>
        this.state.persons.map((person,index) => <li key=“Key”+index>person.name</li>)
   </ul>

【讨论】：

我已经更新了实际代码。问题是没有获取数据，也没有在控制台中显示 -> console.log(response.data)

如果在浏览器jsonplaceholder.typicode.com/users中直接访问这个url呢？收到回复了吗？

是的，它提供了一个很大的 json 数据

好吧，如果你做 console.log(response) 你会得到什么？

console.log(response) 也没有给出任何内容。

【参考方案2】：

最大的问题（如果没有打印）可能是您的组件没有呈现。您正在定义，但没有呈现 ItemLister。它需要在某个地方渲染。要轻松解决此问题，请将ItemLister 的定义移动到上方 ReactDOM.render，并渲染<ItemLister /> 而不是element。我认为应该渲染元素。

如果组件没有渲染，里面的代码（包括 axios fetch）将不会运行。

你的代码应该是这样的：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

import axios from 'axios'

export default class ItemLister extends React.Component 
  state = 
    persons: []
  

  componentDidMount() 
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => 
      // Handle service success response
      console.log(response.data)

      const persons = response.data;
      this.setState( persons );
    )
  

  render() 
    return <ul>this.state. persons.map(person => <li>person.name</li>)</ul>
  


ReactDOM.render(<ItemLister />, document.getElementById('root'))
registerServiceWorker()

---

如果这会启动组件日志记录，我认为您可能会遇到另一个问题：

问题似乎不在于您的 React 代码（即任何组件级问题），而是来自 API 的响应与您的期望不符。我在 Chrome 控制台中运行了以下测试请求（使用fetch，其工作方式类似于axios）：

fetch('https://jsonplaceholder.typicode.com/users').then(resp => console.log(resp))

返回的响应对象如下所示：

Response type: "cors", url: "https://jsonplaceholder.typicode.com/users", redirected: false, status: 200, ok: true, …
body: (...)
bodyUsed: false
headers: Headers 
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://jsonplaceholder.typicode.com/users"

首先要注意的是，此响应中没有data 属性。第二件要注意的是body 不是基本数据类型。那么让我们看看body是什么：

fetch('https://jsonplaceholder.typicode.com/users').then(resp => console.log(resp.body))

记录的响应：

ReadableStream 

看起来body 是ReadableStream 。

这可能意味着我们需要"unpack" the response into JSON，这样resp.body 是一个JSON 对象，而不是ReadableStream。

fetch('https://jsonplaceholder.typicode.com/users').then(resp => resp.json()).then(data => console.log(data))

宾果游戏。回复如下：

(10) […, …, …, …, …, …, …, …, …, …]

一个由十个对象组成的数组，它们似乎是您想要的用户。

【讨论】：

有没有其他免费的 sanple REST api 我可以测试一下。

我需要帮助。如果我想在 axios.get URL 之后添加“header”，如何添加 header？

Axios 将configs 对象作为get 的第二个参数。我认为您需要做的就是在这些配置中传递 headers 作为文档大纲：github.com/axios/axios#instance-methods