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

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

reactjs

Stella · 技术社区 · 7 年前

我正在尝试开发示例Reactjs web应用程序,尝试使用RESTAPI并获取一些json数据。请看代码。

在visualstudio中本地执行代码后,我正在检查chrome浏览器,但是chrome控制台日志中没有打印任何内容。我认为,下面的代码无法获取数据。我没有发现这段代码有任何错误。有人能帮我引路吗?

我用过轴心和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>
  }
}

2 回复 | 直到 7 年前

Sasha 7 年前

最大的问题(如果没有打印)可能是组件没有呈现。 您正在定义,但不是渲染 ItemLister . 它需要在某处渲染。要轻松解决此问题,请移动 项目列表器 ReactDOM.render ,并渲染 <ItemLister /> element . 我认为这应该是元素的表现。

所以你的代码应该是这样的:

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 不是基本数据类型。让我们看看是什么 身体 是:

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

ReadableStreamÂ {}

看起来像 身体 是一个 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)Â [{â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}]

Hemadri Dasari 7 年前

   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元素加上键。在执行下面的循环时,需要向父元素添加键

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

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