无法显示从服务器发送的 json 数据

IT技术 json reactjs
2021-05-15 03:52:09

我从服务器接收数据作为 json 数据但无法在浏览器上显示它我收到错误

" 对象作为 React 子对象无效（发现：对象带有键 {_id, Id, Name, Age}）。如果您打算渲染子对象集合，请改用数组或使用 createFragment(object) from 包装对象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;
2个回答

该错误表明这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>
    );
  }
}

JSON.stringify()将整个转换object为 a 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>
    );
  }

通过这种方式，您可以更好地控制每个元素，您可以应用不同的样式、格式等。

其它你可能感兴趣的问题
上一篇难以获得良好的精度 下一篇台达3D打印机挤出机？