对象的反应setState返回未定义的[重复]答案

【问题标题】：React setState of an object returns undefined [duplicate]对象的反应setState返回未定义的[重复]
【发布时间】：2019-12-12 16:05:57
【问题描述】：

所以我为一个物联网项目制作了这个反应应用程序，它作为 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"
        });
    }
.
.
.
.

【问题讨论】：

this.results未定义是正常的，应该是this.state.results。但是，设置后不能直接访问状态。
setState 是异步函数
@Axnyff 所说的是正确的。将其更改为使用 this.state.results，您将得到一个空数组而不是未定义的数组。 setState 是异步的，因此您无法立即访问所需的结果。
1.您必须通过this.state.results 访问结果。因为我们在 state 对象中设置 results 属性。 2. setState 基本上是异步的，所以如果你尝试在下一行打印它会返回之前的值（如果没有初始化值，那么它将是未定义的）。所以使用回调函数进行进一步操作。它与 Promise 非常相似。
@Axnyff 非常感谢它的工作。我做了
{this.state.results}
现在打印出来了！没有意识到我必须使用 this.state，我感到很愚蠢。非常感谢

标签： javascript node.js reactjs iot

【解决方案1】：

SetState 是一个 Promise，如果设置后需要马上使用，你应该将其用作承诺，如下所示：

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

【讨论】：

不，这不是承诺。
这不是承诺，是吗？它是异步的，但它不返回 Promise 或 'thennable'
没错，对不起，我错了，这不是 Promise，它只是一个异步函数。
成功了。我错过了 this.state 并理解 setState 是异步的事实。谢谢
不客气。

{this.state.results}