我能够看到在控制台中获取的数据，但我无法显示？

Question

我能够获取数据，因为它只是我可以从控制台看到的一条记录，但由于我在代码中写错了一些东西，我无法显示...但我能够在控制台中看到获取的数据数据类似于这样的数据：Array(4) 0: "Admin ID : 602" 1: "Name : Raj" 2: "Admin pin : 131195" 3: "PHONE NUMBER :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

Answer 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

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

Answer 2

console.log(this.state.posts)

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

Answer 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

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

以及你的价值不能成为这里的对象

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