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

【问题标题】：I am able to see the data fetched in console but i am not able to display?我可以看到在控制台中获取的数据，但我无法显示？
【发布时间】：2020-09-26 21:58:10
【问题描述】：

我能够获取数据，因为它只是我可以从控制台看到的一条记录，但由于我在代码中写错了一些东西，我无法显示...但我能够看到获取的数据在控制台中的数据是这样的数据：数组（4） 0：“管理员 ID：602” 1：“姓名：拉杰” 2：“管理员密码：131195” 3：“电话号码：9742894200”

import Axios from 'axios'
import  React, { Component }  from 'react'

class Admin extends Component{
    constructor(props){
        super(props)

        this.state={
            posts: []
        }
    
    }
    componentDidMount(){
      const username  = this.props.location.username;
      Axios.get('http://localhost:9000/admin-service/admin/'+username)
      .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 Admin

【问题讨论】：

你能分享 API 的响应吗？
似乎您的数据端点以您写下它们的方式返回了一个字符串数组。
[“管理员 ID：101”，“姓名：milansai”，“管理员密码：131198”，“电话号码：9742894200”]
以上是 api 响应，所以我应该如何尝试显示它..
似乎响应是字符串数组，您无法像这样预览 adminId 响应应该是这样的 { adminId:101, name: "milansai" }

标签： javascript reactjs

【解决方案1】：

我已尝试重现您的问题，您的代码似乎运行良好。

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

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

【讨论】：

我已将 API RESPONSE 更改为 adminId: 101 adminName: "milansai" adminPhone: "9742894200" adminPin: 131198 我现在需要进行哪些更改才能显示记录？
您的响应是数组还是单个对象？如果它是一个数组，那么您的初始解决方案应该可以正常工作。如果是单个对象，posts应该初始化为undefined，模板可以是posts? <div>posts.admin.adminId</div> : null
data: adminId: 101 adminName: "milansai" adminPhone: "9742894200" adminPin: 131198
这是我的回复，我应该如何显示？
我会认为您的响应是 JSON 对象而不是字符串。所以在 init this.state = {posts: undefined} 然后在模板中，你只需要阅读适当的字段（我认为我之前的答案有错字，我的意思是 posts.adminId 而不是 posts.admin.adminId）<h2>USER DASHBOARD:</h2>{posts ? <div>{posts.adminId}</div>) : null}

【解决方案2】：

console.log(this.state.posts)

查看您获取的数据是否正在保存到状态

【讨论】：

【解决方案3】：

您从 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

虽然使用这种方法有各种注意事项，比如这里你将无法区分不同的原语，因为所有值将是字符串。因此，您将失去您所需要的各种支票以后会需要的。

你的价值也不能在这里成为一个对象

我会建议你改变你的响应数据结构和使用对象。

【讨论】：