Question

所以我有一个为IoT项目制作的react应用，它是3个带有温度和湿度以及土壤和空气湿度的图表，我对API进行了提取，返回了与此类似的响应JSON（但是有10个数据值，我并没有包括所有内容，以使这篇文章不会变得太大）：

{
  "dados":[
{
  "T_air":20,
  "H_air":60,
  "soil":70,
  "Time":"2019-12-12T16:09:35.719Z"
},
{
  "T_air":20,
  "H_air":60,
  "soil":70,
  "Time":"2019-12-12T16:09:35.719Z"
},
{
  "T_air":20,
  "H_air":60,
  "soil":70,
  "Time":"2019-12-12T16:09:35.719Z"
},
{
  "T_air":20,
  "H_air":60,
  "soil":70,
  "Time":"2019-12-12T16:09:35.719Z"
},
{
  "T_air":20,
  "H_air":60,
  "soil":70,
  "Time":"2019-12-12T16:09:35.719Z"
}
],
  "LastTime":"12/12/2019, 15:43:53"
}

关键是我需要在渲染器中打印LastTime对象，因为我使用了setState属性，但是如果console.log ResData我可以看到我的对象，但是如果我进行了控制台。日志results表示未定义。您可以在我的代码中看到，如果我使用ResData.dados[i].T_air根本没有问题，所以这不是API错误。

import React, { Component } from 'react';
import '../App1.css'
import CanvasJSReact from '../assets/canvasjs.react';
var CanvasJSChart = CanvasJSReact.CanvasJSChart;


var dataPoints =[];
var dataPoints_1 = [];
var dataPoints_2 = [];


class LineChart extends Component {
    constructor(props){
        super(props);
        this.state={
            results: []
        };
    }

.
.
.
.
componentDidMount(){
        var chart = this.chart;
        var chart1 = this.chart1;
        var chart2 = this.chart2;
        fetch('http://localhost:4000/espdata/')
        .then((response) => {
            return response.json();
        })
        .then((ResData) => {
            for (var i = 0; i < 10; i++) {
                var today = new Date(ResData.dados[i].Time);
                dataPoints.push({
                    x: today,
                    y: ResData.dados[i].T_air
                });
                dataPoints_1.push({
                    x: today,
                    y: ResData.dados[i].H_air
                });
                dataPoints_2.push({
                    x: today,
                    y: ResData.dados[i].soil
                });
            }
            chart.render();
            chart1.render();
            chart2.render();
            this.setState({results: ResData.LastTime});
            console.log(this.results);   //UNDEFINED
            console.log(ResData.LastTime) // "12/12/2019, 15:43:53"
        });
    }
.
.
.
.

Answer 1

SetState是一个承诺，如果您需要在设置后立即使用它，则可以应该使用它作为承诺，像这样：

this.setState({results: ResData.LastTime}, () => {console.log(this.state. results); })

反应对象的setState返回未定义

1 个答案: