我正在尝试开发示例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。它需要在某个地方渲染。要轻松解决此问题，请移动ItemLister 上方 的定义ReactDOM.render，然后渲染<ItemLister />而不是element。我认为应该渲染元素。
如果未渲染该组件，则其中的代码（包括axios提取）将不会运行。
因此，您的代码应如下所示：
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 {}。
这可能意味着我们需要将响应“解包”为JSON，这resp.body是一个JSON对象，而不是ReadableStream。
fetch('https://jsonplaceholder.typicode.com/users').then(resp => resp.json()).then(data => console.log(data))
答对了。这是回应：
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
十个对象的数组，它们似乎是您想要的用户。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句