Переменная состояния доступа в функции загрузки события highcharts

Question

export class GraphComponent extends React.Component{
    constructor(){
        super();
        this.state={data:[],data20:[]};
    }

    render(){
        var Highcharts='Highcharts';
        let self=this;
        var conf={
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    load: function () {
                        var series = this.series[0],i=0,j=1,k=0;
                        var p=self.state.data; // Access State variable here
                    }
                }
            }
            series: [{
            name: 'Random data',
            data: this.state.data20 / Accessible Here
            }]
        }
        return (<ChartView style={{height:300}} config={conf} options={options}></ChartView>);
    }
}

{"data":[{"x":154745486745,"y":0.5} // some 50-60 objects like this]}

Я получаю эти данные из JSON / SERVER в state.data20 (первые 20) и state.data (остальные).State.data20 строятся.state.data не доступен в функции загрузки события Charts.Я пробовал несколько методов, но все еще не получилось.

С собственной ссылкой Image

Без собственной ссылки Image

Answer 1

Попробуйте сохранить ссылку do this в переменной. Проверьте это:

export class GraphComponent extends React.Component{
    constructor(){
        super();
        this.state={data:[],data20:[]};
    }

    render(){
        var Highcharts='Highcharts';

        // Declare a variable to keep a reference to react context
        let self = this;

        var conf={
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    load: function () {
                        var series = this.series[0],i=0,j=1,k=0;
                        var p = self.state.data; // Access State variable using self
                    }
                }
            }
        }
        return (<ChartView style={{height:300}} config={conf} options={options}></ChartView>);
    }
}