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

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 }&nbsp; from "react";import "./styles.css";class Admin extends Component{&nbsp; &nbsp; constructor(props){&nbsp; &nbsp; &nbsp; &nbsp; super(props)&nbsp; &nbsp; &nbsp; &nbsp; this.state={&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; posts: []&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; componentDidMount(){&nbsp; &nbsp; &nbsp; const username&nbsp; = this.props.location.username;&nbsp; &nbsp; &nbsp; new Promise((resolve) => {&nbsp; &nbsp; &nbsp; &nbsp; resolve({data: [{adminId: username + 0}, {adminId: username +1}]})&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ posts : response.data })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response);&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch(error => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; &nbsp; })&nbsp; }&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; const { posts } = this.state&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>USER DASHBOARD:</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; posts.length ?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; posts.map(admin => <div key={admin.adminId}>{admin.adminId}</div>) :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;}export default function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <Admin location={{username: 'test'}}/>&nbsp; &nbsp; </div>&nbsp; );}我猜 API 响应没有您期望的格式。根据您的 console.log，您可以将模板更改为：posts.length > 0 && posts[0].split(' : ').length > 1 ?&nbsp;&nbsp; &nbsp; <div>{posts[0].split(' : ')[1]}</div>&nbsp;&nbsp; &nbsp; : 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)=>{&nbsp; &nbsp;const obj={}&nbsp; &nbsp;arrayOfStrings.map(item =>{&nbsp; &nbsp; &nbsp; &nbsp;const [key, value]=item.split(':')&nbsp; &nbsp; &nbsp; &nbsp;obj[_.camelCase(key.trim())]=value.trim()&nbsp; &nbsp;})&nbsp; &nbsp;return obj}在这里，我使用了 lodash 的 _.camelCase 以获取更多信息，您可以访问https://lodash.com/docs/4.17.15#camelCase尽管像这里这样使用这种方法有各种注意事项，但您将无法区分不同的基元，因为所有值都是字符串。因此，您将失去将来需要的各种支票。以及你的价值不能成为这里的对象我会建议您更改响应的数据结构并使用对象。