3 回答

TA貢獻2080條經驗 獲得超4個贊
我已嘗試重現您的問題,您的代碼似乎運行良好。
import React, { Component } from "react";
import "./styles.css";
class Admin extends Component{
constructor(props){
super(props)
this.state={
posts: []
}
}
componentDidMount(){
const username = this.props.location.username;
new Promise((resolve) => {
resolve({data: [{adminId: username + 0}, {adminId: username +1}]})
})
.then(response => {
this.setState({ posts : response.data })
console.log(response);
})
.catch(error => {
console.log(error);
})
}
render(){
const { posts } = this.state
return(
<div>
<h2>USER DASHBOARD:</h2>
{
posts.length ?
posts.map(admin => <div key={admin.adminId}>{admin.adminId}</div>) :
null
}
</div>
)
}
}
export default function App() {
return (
<div className="App">
<Admin location={{username: 'test'}}/>
</div>
);
}
我猜 API 響應沒有您期望的格式。根據您的 console.log,您可以將模板更改為:
posts.length > 0 && posts[0].split(' : ').length > 1 ?
<div>{posts[0].split(' : ')[1]}</div>
: null
但理想情況下,您應該更新服務器響應以返回正確的對象而不是字符串數組。

TA貢獻1801條經驗 獲得超8個贊
您從 API 收到的響應實際上是字符串數組
data = ["Admin ID : 602", "Name : Raj" , "Admin pin : 131195", "PHONE NUMBER : 9742894200"]
并且您正在嘗試將其用作對象。似乎您還希望您的密鑰位于駝峰式大小寫中,因此您可以在后端修復此問題,也可以在前端編寫一個適配器
var keysAdapters =(arrayOfStrings)=>{
const obj={}
arrayOfStrings.map(item =>{
const [key, value]=item.split(':')
obj[_.camelCase(key.trim())]=value.trim()
})
return obj
}
在這里,我使用了 lodash 的 _.camelCase 以獲取更多信息,您可以訪問https://lodash.com/docs/4.17.15#camelCase
盡管像這里這樣使用這種方法有各種注意事項,但您將無法區分不同的基元,因為所有值都是字符串。因此,您將失去將來需要的各種支票。
以及你的價值不能成為這里的對象
我會建議您更改響應的數據結構并使用對象。
添加回答
舉報