Javascript React似乎在跳转

如果这里的问题不好，我提前道歉。在下面的代码中，我声明了一个简单的循环，其中包含一个循环，所有这些都在React组件的环境中。出于某种原因，测试函数的回调可以工作，但循环中的标记和代码似乎都没有执行。这是否与异步有关？我怎样才能修好它？谢谢你的建议。 关注的代码是标记为test的函数，函数的执行驻留在render函数中

import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';
import axios from 'axios';

var gData;
var a;
var dateArray = [];
class Graph extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            resolution: 'year',
            range: 7,
            data: this.props.data,
            dataLen: this.props.data.length,
            rendered: false,
            dataDisp: null,
        }
    }
    setGraph=()=>{
        switch (this.state.resolution) {
            case 'year':
                var dateArray = [];
                for(var i = 0; this.state.data.length;i++){
                    var yearTotal;
                    var yearA = this.state.data[i].date.substr(0,3);
                    yearTotal = this.state.data[i].time;
                    for(var j=0; this.state.data.length;j++){
                        var yearB = this.state.data[j].date.substr(0,3);
                        if((yearA === yearB) && (i != j)){
                            yearTotal += this.state.data[j].time;
                        }
                    }
                    var yearArray = [yearA, yearTotal];
                    dateArray.push(yearArray);
                }
            break;
            console.log(dateArray);
        }
    }
    test=(callback)=>{
        for(var i=0; j < this.state.data.length;i++){
            console.log(i);
            var yearTotal;
            var yearA = this.state.data[i].date.substr(0,4);
            yearTotal = parseInt(this.state.data[i].time);

            for(var j=0; j < this.state.data.length;j++){
                var yearB = this.state.data[j].date.substr(0,4);
                if((yearA === yearB) && (i != j)){
                    yearTotal += this.state.data[j].time;
                }
                console.log("Marker, which doesn't show up");
            }
            var yearArray = [yearA, yearTotal];

            dateArray.push(yearArray);
            if(i === (this.state.data.length-1)){
                callback();
            }
        }
    }
    render(){
        gData = {
            labels: [],
            datasets: [
                {
                    label: 'My First dataset',
                    fill: true,
                    lineTension: 0.1,
                    backgroundColor: 'rgba(75,192,192,0.4)',
                    borderColor: 'rgba(75,192,192,1)',
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: 'rgba(75,192,192,1)',
                    pointBackgroundColor: '#fff',
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                    pointHoverBorderColor: 'rgba(220,220,220,1)',
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: this.state.data
                }
            ]
        };

        this.test(console.log(dateArray));

            return(
            <div>
                <div id="resolution">
                    <h2>Resolution</h2>
                    <select>
                    <option value="day">Days</option>
                    <option value="week">Weeks</option>
                    <option value="month">Months</option>
                    <option value="year">Years</option>
                    </select>
                </div>
                <Line data={gData}/>
            </div>

            );


    }
}
export default Graph

---

它更多的是反应生命周期的东西；在react内部对render方法的第一次调用中，您执行test函数并对dateArray进行更改，但是在进行更改以更新UI之后，需要再次调用render方法。 怎么做？react会在状态更改时自动重新呈现组件，因此请尝试将任何与UI相关的变量置于该状态

怎么办？ 将dateArray移动到组件的状态，使用此.setState函数修补对其进行的任何更新

有一篇很好的文章更多地讨论了setState 你可以去看看