Question

如果这里的问题很糟糕，我会事先道歉。在下面的代码中，我陈述了一个内部循环的简单循环，所有循环都在React组件的环境中。由于某种原因，测试函数的回调可以工作，但是循环中的所有标记和代码都没有被执行。这与异步的东西有关吗？我该如何解决？所有建议表示赞赏。关注的代码是标记为＆＃34; test＆＃34;的功能。并且函数的执行位于＆＃34; render＆＃34;功能

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

Answer 1

更多的是React生命周期的事情;在第一次通过react的内部函数调用render方法时，执行“test”函数并对“dateArray”进行更改，但是为了更新UI而进行更改之后，render方法需要是又叫了一遍。怎么做？每当状态发生变化时，react会自动重新呈现组件，因此请尝试将任何与UI相关的变量置于该状态。

怎么办？将dateArray移动到组件的状态，使用“this.setState”函数修补对它的任何更新。

有一篇很好的文章谈论了更多关于setState的内容 https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b 你可以看看吗

React似乎跳过了循环

1 个答案: