This question already has answers here:
setState doesn't update the state immediately
(13个回答)
23天前关闭。
因此,我有一个针对IoT项目的react应用,它是3个带有温度和湿度以及土壤和空气湿度的图表,我对API进行了提取,返回了与此类似的响应JSON(但是有10个数据值,我没有包括所有内容,以免使该帖子过大)
关键是我需要在渲染器中打印
您可以在我的代码中看到,如果我使用
(13个回答)
23天前关闭。
因此,我有一个针对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我可以看到我的对象,但是如果我console.log 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"
});
}
.
.
.
.
最佳答案
SetState是一个Promise,如果您需要在设置后立即使用它,则可以
应该使用它作为一个承诺,像这样:
this.setState({results: ResData.LastTime}, () => {console.log(this.state. results); })