Javascript 我可以看到控制台中获取的数据，但无法显示？

我能够获取数据，因为我只能从控制台看到一条记录，但由于我在代码中写错了什么，我无法显示……但我能够在控制台中看到获取的数据数据数据是这样的 数据：阵列（4） 0:“管理员ID:602” 1:“姓名：Raj” 2:“管理员密码：131195” 3:“电话号码：9742894200”

从“Axios”导入Axios
从“React”导入React，{Component}
类管理扩展组件{
建造师（道具）{
超级（道具）
这个州={
员额：[]
}
}
componentDidMount（）{
const username=this.props.location.username；
Axios.get（）http://localhost:9000/admin-服务/管理员/'+用户名）
。然后（响应=>{
this.setState（{posts:response.data}）
控制台日志（响应）；
})
.catch（错误=>{
console.log（错误）；
})
}
render（）{
const{posts}=this.state
返回(
用户仪表板：
{
长度？
posts.map（admin=>{admin.adminId}）：
无效的
}
)
}
}
导出默认管理员

我试图重现您的问题，您的代码似乎工作正常

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>
  );
}

import React，{Component}来自“React”；
导入“/styles.css”；
类管理扩展组件{
建造师（道具）{
超级（道具）
这个州={
员额：[]
}
}
componentDidMount（）{
const username=this.props.location.username；
新承诺（（决议）=>{
解析（{data:[{adminId:username+0}，{adminId:username+1}]}）
})
。然后（响应=>{
this.setState（{posts:response.data}）
控制台日志（响应）；
})
.catch（错误=>{
console.log（错误）；
})
}
render（）{
const{posts}=this.state
返回(
用户仪表板：
{
长度？
posts.map（admin=>{admin.adminId}）：
无效的
}
)
}
}
导出默认函数App（）{
返回(
);
}

我猜API响应没有您期望的格式。 根据您的console.log，您可以将模板更改为：

posts.length > 0 && posts[0].split(' : ').length > 1 ? 
    <div>{posts[0].split(' : ')[1]}</div> 
    : null

posts.length>0&&posts[0]。拆分（“：”）。长度>1？
{posts[0]。拆分（':'）[1]}
：null

但理想情况下，您应该更新服务器响应以返回正确的对象，而不是字符串数组

console.log(this.state.posts)

---

要查看您提取的数据是否保存到状态

，您从API收到的响应实际上是字符串数组

data = ["Admin ID : 602", "Name : Raj" , "Admin pin : 131195", "PHONE NUMBER : 9742894200"]

你正试图把它作为对象。您似乎还希望您的密钥在camel情况下，因此您可以在后端修复此问题，也可以在前端编写适配器

var keysAdapters =(arrayOfStrings)=>{
   const obj={}

   arrayOfStrings.map(item =>{
       const [key, value]=item.split(':')
       obj[_.camelCase(key.trim())]=value.trim()
   })

   return obj
}

在这里，我使用了lodash的u.camelCase，您可以访问更多信息

尽管使用这种方法有各种各样的注意事项，就像您这里所说的 无法区分不同的原语，因为所有 值将是字符串。因此，您将丢失您需要的各种支票 将来需要

以及你的价值不能是一个对象在这里，所以

我建议您更改您的响应和响应数据结构 使用对象

---

您可以共享API的响应吗？似乎您的数据端点返回了一个字符串数组，因为它们与您记录的字符串相同。[“管理员ID:101”、“姓名：milansai”、“管理员pin:131198”、“电话号码：9742894200”]上面是api响应，所以我应该如何显示它..似乎响应是字符串数组，您不能像这样预览adminId响应应该是这样的{adminId:101，name:“milansai”}我已将api响应更改为adminId:101 adminName:“milansai”adminPhone:“9742894200”adminPin:131198我现在需要做什么更改来显示记录？您的响应是数组还是单个对象？如果它是一个数组，那么您的初始解决方案应该可以正常工作。如果是单个对象，posts应该初始化为undefined，模板可以是

posts？Admin AdMID:NULL/<代码>数据：Admin：101管理员名：“MalaSai”Admin Poice：“9742894200”Admin PIN：1311985。这是我的响应，我应该如何显示它？我会考虑您的响应是JSON对象而不是字符串。因此，在init
this.state={posts:undefined}
中，您只需要在模板中读取相应的字段（我认为我之前的回答中有一个输入错误，我指的是posts.adminId，而不是posts.admin.adminId）
用户仪表板：{posts？{posts.adminId}）：null}
var keysAdapters =(arrayOfStrings)=>{
   const obj={}

   arrayOfStrings.map(item =>{
       const [key, value]=item.split(':')
       obj[_.camelCase(key.trim())]=value.trim()
   })

   return obj
}