не может отображать данные в формате JSON, отправленные с сервера

Question

Я получаю данные от сервера в виде данных JSON, но не в состоянии отобразить его в браузере, я получаю сообщение об ошибке, как

"Объекты не действуют как React child (found: object with keys {_id, Id, Name, Age}). Если вы хотели отобразить коллекцию из детей, используйте массив или оберните объект, используя createFragment (object) из надстроек React . Провести метод визуализации у студента «

import React from 'react'; 
import axios from 'axios'; 

class Student extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     post:[] 
    } 
    }; 


componentDidMount(){ 
    axios.get('http://localhost:8080/student') 
    .then(data => this.setState({post:data})); 
    } 


    render(){ 
    return(
<div className="pre"> 

<h1>{this.state.post.data}</h1> 
</div> 
    ); 
    } 
} 
export default Student; 

Answer 1

Ошибка указывает на то, что this.state.post.data является объектом и, следовательно, вам необходимо преобразовать его в строку перед рендерингом. Используйте JSON.stringify()

Попробуйте

class Student extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     post:[] 
    } 
    }; 


componentDidMount(){ 
    axios.get('http://localhost:8080/student') 
    .then(data => this.setState({post:data})); 
    } 


    render(){ 
    return(
<div className="pre"> 

<h1>{JSON.stringify(this.state.post.data)}</h1> 
</div> 
    ); 
    } 
} 

Answer 2

JSON.stringify() конвертировать весь object в string, вместо того, чтобы использовать это, и может оказывать специфическое свойство object. В ур объект случае данных содержит 4 ключа _id, Id, Name, Age, так делают это так:

render(){ 
    return(
     <div className="pre"> 
      <h1> 
       Name: {this.state.post.data.Name} 
       <br/> 
       Age: {this.state.post.data.Age} 
       <br/> 
       Id: {this.state.post.data.Id} 
      </h1> 
     </div> 
    ); 
    } 

К таким образом вы будете иметь лучший контроль над каждым элементом, и может применять различные стили, форматы и т.д.