reactjs - React + Laravel - 未定义设置状态
问题描述
我正在尝试打印从 API 获取的值。数据来了但无法设置状态
尝试了一切
反应.js
import React, { Component } from 'react'
import axios from 'axios'
class Admin extends Component {
constructor(props) {
super(props)
this.state = {
users: []
}
}
componentDidMount(){
axios.get('/api/adminUsers')
.then(response =>{
this.setState({users: response.data})
console.log(response.data)
console.log(this.setState({users: response.data}))
})
.catch(error=>{
this.setState({ errorMsg: "Something is wrong here"})
console.log(error)
})
}
render() {
const{users} = this.state
<div>
{
users.length ?
users.map(user => <div key=
{user.id}>{user.name}</div>)
: null
}
</div>
)
}
}
export default Admin
控制台中显示的 response.data 是:
{[
created_at: "2019-08-31 14:06:29"
email: "amit.khare588@gmail.com5"
email_verified_at: null
id: 2
name: "Amit Khare"
role: "Doctor"
updated_at: "2019-08-31 14:06:29"
]}
我只想把数据打印回来
解决方案
下面的代码看起来很好是一个完整的工作示例:
import React from "react";
import ReactDOM from "react-dom";
class Admin extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [],
errorMsg: ''
}
}
componentDidMount() {
axios.get('/api/adminUsers')
.then(response => {
this.setState({users: response.data.users})
console.log(response.data)
})
.catch(error => {
this.setState({errorMsg: "Something is wrong here"})
console.log(error)
})
}
render() {
const {users, errorMsg} = this.state;
return <div>
{users.length ? users.map(user => <div key={user.id}>{user.name}</div>) : null}
{errorMsg ? <div>{errorMsg}</div> : null}
</div>
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Admin/>, rootElement);
查看代码框: https ://codesandbox.io/s/nice-fermi-ku1jr
推荐阅读
- scala - Spark 以编程方式连接到远程 kerberos 保护的 HIVE
- reactjs - 评级反应逻辑
- python - 如何设置keras LSTM的输入形状
- git - gitignore 中路径/文件结尾注释的区别
- mysql - 如何计算出现在列中特定字母之后的字母?
- ios - 在 iOS 如何处理 EXC_RESOURCE RESOURCE_TYPE_MEMORY 错误?
- html - 如何遮盖需要可点击的 div?
- node.js - 如何修复快速路由的空结果?
- azure - 使用 API 从 NetSuite 文件柜下载文件
- html - 相对/响应位置
在 svg 中?可能吗?