Question

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

＆＃34;对象作为React子对象无效（找到：带键的对象） {_id，Id，Name，Age}）。如果你想渲染一个集合 children，使用数组代替或使用包装对象来自React附加组件的createFragment（对象）。检查渲染方法在学生＆＃34;

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>
    );
  }

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

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

2 个答案: