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

Question

我正在尝试开发示例 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>
  }
}

Answer 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>

Answer 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) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

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