亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我能夠看到在控制臺中獲取的數據,但我無法顯示?

我能夠看到在控制臺中獲取的數據,但我無法顯示?

ABOUTYOU 2023-04-01 16:28:34
我能夠獲取數據,因為它只是我可以從控制臺看到的一條記錄,但由于我在代碼中寫錯了一些東西,我無法顯示...但我能夠在控制臺中看到獲取的數據數據類似于這樣的數據: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
查看完整描述

3 回答

?
犯罪嫌疑人X

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

但理想情況下,您應該更新服務器響應以返回正確的對象而不是字符串數組。


查看完整回答
反對 回復 2023-04-01
?
寶慕林4294392

TA貢獻2021條經驗 獲得超8個贊

console.log(this.state.posts)

查看您獲取的數據是否被保存到狀態


查看完整回答
反對 回復 2023-04-01
?
蝴蝶刀刀

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


盡管像這里這樣使用這種方法有各種注意事項,但您將無法區分不同的基元,因為所有值都是字符串。因此,您將失去將來需要的各種支票。


以及你的價值不能成為這里的對象


我會建議您更改響應的數據結構并使用對象。


查看完整回答
反對 回復 2023-04-01
  • 3 回答
  • 0 關注
  • 240 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號