Не могу вызвать state?

Question

[tekleworm]

Есть state

constructor() {
        super();
        this.state = {
            data: {},
            trainer: [],
            diagram: this.chartData(),
        };
    }

В data есть числовое поле boys и girls, хочу их вызвать в функции chartData

chartData() {
        console.log(this.state.data.boys);
        return {
            labels: ['Boys', 'Girls'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [3, 0],
                },
            ]
        }
    }

Но дает ошибку TypeError: this.state is undefined. Что я делаю не так?

Answer 1

[Роман Александрович]

constructor() {
        super();
        this.state = {
            data: {},
            trainer: [],
            diagram: this.chartData(),
        };

this.chartData=this.chartData.bind(chartData)
    }

Comments

[tekleworm]

вот такое говорит 'chartData' is not defined no-undef

[Роман Александрович]

tekleworm, diagram: this.chartData(),
папробуйте убрать это
а вапще лучще дайте скрин ошибки

[Роман Александрович]

tekleworm,

папробуйте так
constructor() {
        super();
        this.state = {
            data: {},
            trainer: [],
            diagram: {
            labels: ['Boys', 'Girls'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [3, 0],
                },
            ]
        },
        };

this.chartData=this.chartData.bind(chartData)
    }

[tekleworm]

Роман Александрович, то же самое. Я хочу в data там где 3 и 0 передать thi.state.data.boys, this.state.data.girls

[Роман Александрович]

tekleworm, думаю что Mikhail Osher вам сказал правильно - вы обращаетесь к данным до того как они записаны в state. как вариант можно написать так

constructor() {
        super();
        this.state = {
            data: {},
            trainer: [],
            diagram: { },
        };

this.chartData=this.chartData.bind(chartData)
    }
componentDidMount(){
this.setState({
diagram:{
            labels: ['Boys', 'Girls'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [3, 0],
                },
            ]
        }
})
}

таким образом вы занесете данные после инициализации стейта

[Роман Александрович]

tekleworm, а покажите весь компонент пожалуйста

[tekleworm]

все, уже решил, спс за помощь. в конструкторе оставил

constructor() {
        super();
        this.state = {
            data: {},
            trainer: [],
            //diagram: this.chartData(),
        };

    }

в chartData():

chartData = () => {
        return {
            labels: ['Boys', 'Girls'],
            datasets: [
                {
                    label: 'My First dataset',
                    fillColor: 'rgba(220,220,220,0.2)',
                    strokeColor: 'rgba(220,220,220,1)',
                    pointColor: 'rgba(220,220,220,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(220,220,220,1)',
                    data: [this.state.data.boys, this.state.data.girls],
                },
            ]
        };
    };

и в рендере:

<div>
                    <Doughnut data={this.chartData()}
                              width="100" height="50"/>
                </div>

Answer 2

[Mikhail Osher]

На момент вызова функции объект еще не записан в "this.state"

Comments

[tekleworm]

а как это исправить?

Answer 3

[DarthJS]

Либо chartData обьявляем как стрелочную функцию
chartData = () => {