Блог

Я могу извлекать данные, поскольку это только одна запись, которую я вижу со своей консоли, но я не могу отобразить из-за того, что я что-то неправильно написал в коде…Но я могу видеть полученные данные в консоли, данные выглядят примерно так: Массив (4) 0: «Идентификатор администратора: 602» 1: «Имя: Raj» 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
  

Я попытался воспроизвести вашу проблему, и ваш код, похоже, работает нормально.

 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 amp;amp; posts[0].split(' : ').length > 1 ? 
    <div>{posts[0].split(' : ')[1]}</div> 
    : null
  

Но в идеале вы должны обновить ответ вашего сервера, чтобы вернуть правильный объект вместо массива строк.

 console.log(this.state.posts)
  

чтобы узнать, сохраняются ли ваши выбранные данные в состояние

Ответ, который вы получаете от 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
}
  

Здесь я использовал _.camelCase из Lodash для получения дополнительной информации вы можете посетить https://lodash.com/docs/4.17.15#camelCase

Хотя при использовании такого подхода, как здесь, существуют различные предостережения, вы не сможете различать разные примитивы, поскольку все значения будут строковыми. Таким образом, вы потеряете различные проверки, которые вам понадобятся в будущем.

А также ваше значение не может быть объектом здесь, поэтому

Я порекомендую вам изменить структуру данных ответа и использовать объекты.