gpt4 book ai didi

javascript - 我无法在 Reactjs 中 console.log() JSON 数据?

转载 作者:行者123 更新时间:2023-12-03 01:58:04 25 4
gpt4 key购买 nike

我正在使用 axios 从 api 端点获取数据。我使用 getAllUser() 方法来获取数据,并使用 displayUsers() 来显示数据中的 userNameemail 。我无法在控制台中获取 JSON 响应。我还在 Chrome 中看到了 XHR,但未向该 API 端点发出请求。请告诉我应该在 getAllUser()displayUsers() 中更改什么,因为我认为我在这些方法中做错了什么。

代码:

import React, { Component } from 'react';
import axios, { post } from 'axios';

class App extends Component {

constructor(props){
super(props);
this.state = {
userList:[]
}
}

ComponentDidMount(){
if(window.sessionStorage.getItem("ud") !== null){
var _userData = JSON.parse(window.sessionStorage.getItem("ud"));
this.userDetails = _userData;
}
this.getAllUser();
}

getAllUser(){
axios({
method:"GET",
url:"http://62.210.93.54:6010/api/getAllUser",
auth:{
username:this.userDetails.email,
password:this.userDetails.password
}
}).then((response)=>{
console.log(response.data);
this.setState({
userList:response.data.results
})
})
}

displayUsers(){
return this.state.userList.map( user => {
return(
<div className="item-card">
<div className="info">
<div className="username">Username: {user.userName}</div>
</div>
<div className="del-wrap">
<img src={require("../../images/cancel.svg")}/>
</div>
</div>
);
})
}

render() {
return(
<div className="users-wrap">
<h1>Users</h1>
<div className="task-content">
<div className="user-wrap">
<div className="users">
<div className="item-card add">
<img src={require("../../images/plus.svg")} className="plus-icon" />
<div className="lbl">Add a new User</div>
</div>

{this.displayUsers()}

</div>
</div>
</div>
</div>
);
}
}

export default App;

JSON 响应应该有 4 个对象,模型架构如下所示:

 {
"results": [
{
"createdBy": null,
"updatedBy": "Ankit",
"createdDate": 1523892363509,
"updatedDate": 1524066767311,
"id": "5ad4c1964417fc66067b29cf",
"userName": "admin",
"email": "ankit@woocation.com",
"roles": [
"USER"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1523971940177,
"updatedDate": 1523971940177,
"id": "5ad5f7640ff4ec580b885a2e",
"userName": "varun",
"email": "varun@woocation.com",
"roles": [
"ADMIN"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524302563169,
"updatedDate": 1524302563169,
"id": "5adb02e30ff4ec53076ffbb7",
"userName": "Rahul",
"email": "rahul@woocation.com",
"roles": [
"admin"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524303894654,
"updatedDate": 1524303894654,
"id": "5adb08160ff4ec53076ffbbb",
"userName": "Nandita",
"email": "nandita@woocation.com",
"roles": [
"member"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524308787960,
"updatedDate": 1524308787960,
"id": "5adb1b330ff4ec53076ffbc2",
"userName": "user",
"email": "user@woocation.com",
"roles": [
"USER"
]
},
{
"createdBy": null,
"updatedBy": null,
"createdDate": 1524327504461,
"updatedDate": 1524327504461,
"id": "5adb64500ff4ec53076ffbc4",
"userName": "Rinku",
"email": "test@woocation.com",
"roles": [
"admin"
]
}
],
"httpStatus": "OK",
"message": "All Users response"
}

最佳答案

看起来您在使用生命周期 Hook 时出现了拼写错误:

componentDidMount() {} 而不是 ComponentDidMount() {}(无大写 C)

关于javascript - 我无法在 Reactjs 中 console.log() JSON 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50149892/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com