Question

从服务器接收 JSON 数据，但无法在 React 中解析数据

2017-01-27

334

json reactjs

我从服务器接收数据但无法解析它。解析时出现错误 “JSON 中位置 0 处出现意外标记 u JSON.parse ()”。

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



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

  }


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

);

    }


  render(){
    return(
    <div>
    {JSON.parse(this.state.post.data)}


</div>

    );
  }
}
export default Premontessori;

Answer 1

这个：

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

... 会将您的状态设置为 {post: ...}，其中 ... 是 data 的值，它可能是字符串或已解析的对象树，具体取决于 axios.get 在收到 JSON 时是否自动解析它。

如果它是一个字符串，则需要使用 JSON.parse 对其进行解析。然后直接使用它：

.then(data =>  this.setState(JSON.parse(data) )

...或者，如果它确实是 post 的值，则：

.then(data =>  this.setState({post: JSON.parse(data)} )

如果它已经解析过，那么我猜它不应该是 post 的值，因此：

.then(data =>  this.setState(data))