Почему выдаёт ошибку 'char' is not defined?

Question

[ibragim_2008]

Ошибка: Line 19:13: 'char' is not defined no-undef.

Код:

import React, {Component} from 'react';
import GotService from '../../services/gotService'
import './charDetails.css';
export default class CharDetails extends Component {

    gotService= new GotService()

    state = {
        char: null
    }

    componentDidMount() {
        this.updateChar();
    }

    updateChar() {
        const {charId} = this.props;

        if(!char) {
            return;
        }

        this.gotService.getCharacter(charId)
            .then((char) => {
                this.setState({ 
                  char
                })
            })
        }

    render()  {

        if(!this.state.char) {
            return <span className='select-error'>Please select a char</span>
        }

        const {name, gender, born, died, culture} = this.state.char;

        return (
            <div className="char-details rounded">
                <h4>{name}</h4>
                <ul className="list-group list-group-flush">
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Gender</span>
                        <span>{gender}</span>
                    </li>
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Born</span>
                        <span>{born}</span>
                    </li>
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Died</span>
                        <span>{died}</span>
                    </li>
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Culture</span>
                        <span>{culture}</span>
                    </li>
                </ul>
            </div>
        );
    }
}

Comments

[Sergo Zar]

p.s. тег css и html к этому вопросу не относятся

[WbICHA]

Line 19:13: 'char' is not defined

Что я могу сказать, тут надо собирать консилиум из самых светлых голов хабра для решения возникшей проблемы.

[Yupiter7575]

Мне интересно кто на этот вопрос подписался...

Answer 1

[Sergo Zar]

у тебя нету переменной char. единственный charу тебя в объекте state.

Если ты хочешь использовать переменную char из этого объекта то можно сделать так:

import React, {Component} from 'react';
import GotService from '../../services/gotService'
import './charDetails.css';
export default class CharDetails extends Component {

    gotService= new GotService()

    state = {
        char: null
    }

    componentDidMount() {
        this.updateChar();
    }

    updateChar() {
        const {charId} = this.props;

        // if(!char) {
        if(!this.state.char) {
            return;
        }

        this.gotService.getCharacter(charId)
             .then((char) => {
                this.setState({ 
                  char
                })
            })
        }

    render()  {

        if(!this.state.char) {
            return <span className='select-error'>Please select a char</span>
        }

        const {name, gender, born, died, culture} = this.state.char;

        return (
            <div className="char-details rounded">
                <h4>{name}</h4>
                <ul className="list-group list-group-flush">
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Gender</span>
                        <span>{gender}</span>
                    </li>
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Born</span>
                        <span>{born}</span>
                    </li>
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Died</span>
                        <span>{died}</span>
                    </li>
                    <li className="list-group-item d-flex justify-content-between">
                        <span className="term">Culture</span>
                        <span>{culture}</span>
                    </li>
                </ul>
            </div>
        );
    }
}

Comments

[WbICHA]

if(!state.char) {

Гениально!
Line XX:YY: 'state' is not defined

[Sergo Zar]

WbICHA, а если заменить на this.state.char?(мне сейчас нечем проверить код на работоспособность)

Answer 2

[sk8beemo]

this.state.char
https://developer.mozilla.org/en-US/docs/Web/JavaS...