Question

反应表
我向后端发出了axios.get请求，这反过来又从mongodb提供了一个大数据集。的返回的数据结构为：

[
1: {_id: "5dd3be2ecf55e1ec388f502b", timestamp: 1574157870567, message: "{"temperature":58,"humidity":59,"pressure":"1 bar"}"}
2: {_id: "5dd3be2ecf55e1ec388f502a", timestamp: 1574157870067, message: "{"temperature":78,"humidity":79,"pressure":"1 bar"}"}
...
]

我想显示它到反应表。正在显示id和时间戳，但未显示温度和其他变量。
消息是字符串。如何解析后面的数据量-end将消息转换为对象？
后端代码


    router.get('/viewData',async(req,res) =>{
    collection.find({},{_id:0,timestamp:0}).sort({timestamp:-1}).limit(400).toArray(function (err, resultantData) {
            if (err)
                throw err;
            //var storedDataArray ;
            //var gotData=[];
            //var index =0;
            //storedDataArray=resultantData;
            //console.log(storedDataArray)
            // storedDataArray.forEach(element => {
            //     gotData[index]=JSON.parse(element);
            //     console.log(gotData[index])
            //     index++;
            // })
            // console.log(gotData.length);
           res.status(200).json(resultantData);
        });

有什么办法可以在反应表中显示温度和其他数量？

反应表


class deviceData extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataList:[],
            data : ' '
        };
    }

    componentDidMount(){
        const url="http://localhost:5000/api/data/viewData";
        fetch (url,{
            method: "GET"
        }).then(response=> response.json()).then(result=>{
            console.log(result);

           this.setState({
            dataList : result,

           });
        });
  }


    render() {
        const columns =[
            {
                Header:"Message ID",
                accessor:"_id",
                sortable: true,
                filterable: false,
                style:{
                    textAlign: "left"
                },
                width: 300,
                maxWidth: 100,
                minWidth: 100,
            },
            {
                Header:"Time Stamp",
                accessor:"timestamp",
                width: 300,
                maxWidth: 100,
                minWidth: 100,
            },
            {
                Header:"Temperature",
                id:'temperature',
                filterable: false,
                accessor: 'temperature'
            },
            {
                Header:"Pressure",
                id:'pressure',
                filterable: false,
                accessor: 'pressure'
            },
            {
                Header:"Humidity",
                id:'humidity',
                filterable: false,
                accessor: 'humidity'
            },




]
       return(
           <div className="ReactTable">
           <ReactTable
           columns={columns}
           data={this.state.dataList}
           defaultPageSize={10}
           className="-striped -highlight"
           >
           </ReactTable>
           <div id={"#"+ this.props.id} ></div>
           </div>

       );
    }
}
[![React-Table][1]][1]

后端响应

[
    {
        "_id": "5dd3be2fcf55e1ec388f502c",
        "timestamp": 1574157871067,
        "message": "{\"temperature\":93,\"humidity\":94,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2ecf55e1ec388f502b",
        "timestamp": 1574157870567,
        "message": "{\"temperature\":58,\"humidity\":59,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2ecf55e1ec388f502a",
        "timestamp": 1574157870067,
        "message": "{\"temperature\":78,\"humidity\":79,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2dcf55e1ec388f5029",
        "timestamp": 1574157869567,
        "message": "{\"temperature\":88,\"humidity\":89,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2dcf55e1ec388f5028",
        "timestamp": 1574157869066,
        "message": "{\"temperature\":99,\"humidity\":100,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2ccf55e1ec388f5027",
        "timestamp": 1574157868567,
        "message": "{\"temperature\":38,\"humidity\":39,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2ccf55e1ec388f5026",
        "timestamp": 1574157868067,
        "message": "{\"temperature\":82,\"humidity\":83,\"pressure\":\"1 bar\"}"
    },
    {
        "_id": "5dd3be2bcf55e1ec388f5025",
        "timestamp": 1574157867566,
        "message": "{\"temperature\":76,\"humidity\":77,\"pressure\":\"1 bar\"}"
    }
]

Answer 1

使用parse()

将字符串转换回对象

例如：var object = JSON.parse（str）;

重要的是用正确的访问器定义列。试试这个：

const columns = [
      {
        Header: "Id",
        accessor: "_id"
      },
      {
        Header: "timestamp",
        accessor: "timestamp"
      },
      {
        Header: "Temprature",
        accessor: "message.temprature"
      },
      {
        Header: "humidity",
        accessor: "message.humidity"
      },
      {
        Header: "pressure",
        accessor: "message.pressure"
      }   
    ];

并像下面这样在React-table中使用它：

<ReactTable
 data={loans}  // Instead of loans, use variable where you store your response 
 columns={columns}
 defaultPageSize={10}
 sortable={true}
/>

Answer 2

我认为您可以尝试在获取方法中添加 headers

fetch (url,{
    method: "GET",
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json",
    }
})

这将确保您的响应是JSON

首先尝试用邮递员尝试url，设置这些标头，然后查看结果是否为JSON，如果为JSON，我相信我的代码会为您提供帮助，如果不是JSON返回，请尝试更改您的后端代码以确保返回使用邮递员的JSON

如何在具有结构{_id：“ xx”，timestamp：“ xx”，message：“ {” temperature：22“，” humi“：45}”}的React Table中显示数据？

2 个答案: