Всё тот любимый undefined

@Iangyl · Регистрация: 31.03.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте!

Не понимаю сути этой ошибки:

При передачи данных в store пишет, что у меня undefined(хотя там есть данные)(проблемы с getPockeBlock):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import React from 'react';
import './style.scss';
import { connect } from 'react-redux';
 
class PokeItems extends React.Component{   
    state = {
        imgLoad: true,
        requestErr: false,
        pokemonImg: '',
        pokemonIndex: '',
    }
    
    componentDidMount(){
        const {id, name, url} = this.props;
        const pokemonIndex = (url) ? url.split('/')[url.split('/').length - 2] : '1';
        const pokemonImg = `https://github.com/PokeAPI/sprites/blob/master/sprites/pokemon/${pokemonIndex}.png?raw=true`;
        this.setState({ pokemonImg, pokemonIndex });
    }
 
    getPokeBlock(){
        const pokeImg = (typeof this.state.pokemonImg == undefined) ? '1' : this.state.pokemonImg;
        const pokeUrl = this.props.url;
        const pokeIndex = this.state.pokemonIndex;
        const pokeName = this.props.name.split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join();
        this.props.onPokeBlockInfDirect({
            pokeImg: pokeImg,
            pokeUrl: pokeUrl,
            pokeIndex: pokeIndex,
            pokeName: pokeName,
        });
    }
 
    render(){
        return(
            <li key={this.props.id} onClick={this.getPokeBlock}>
                <div className='img-box'>
                    <img
                        src={this.state.pokemonImg} alt='pika4u'
                        onLoad={() => this.setState({imgLoad: false})}
                        onError={() => this.setState({requestErr: true})}
                    />
                </div>
                <div className='name-box'>
                    {this.props.name.split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join()}
                </div>
            </li>
        )
    }
}
 
export default connect(
    state => ({
        
    }),
    dispatch => ({
        onPokeBlockInfDirect: (data) => {
            dispatch({
                type: 'POKEMON_DEV_INF',
                payload: data,
            });
        },
    })
)(PokeItems);

Вот подтверждение того, что в компоненте те данные, которые я передавал, они присутствуют:

@Egor.S · 19.06.2020, 10:18

у вас в методе this всегда undefined

в конструкторе:

JavaScript
1
this.getPokeBlock= this.getPokeBlock.bind(this);

или так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 getPokeBlock = () => {
        const pokeImg = (typeof this.state.pokemonImg == undefined) ? '1' : this.state.pokemonImg;
        const pokeUrl = this.props.url;
        const pokeIndex = this.state.pokemonIndex;
        const pokeName = this.props.name.split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join();
        this.props.onPokeBlockInfDirect({
            pokeImg: pokeImg,
            pokeUrl: pokeUrl,
            pokeIndex: pokeIndex,
            pokeName: pokeName,
        });
    }

для второго варианта возможно понадобится babel-plugin-transform-class-properties

@Iverycool · 19.06.2020, 10:25

Iangyl, вы не понимаете this, решением вашей проблемы будет либо изменения onclick:

JavaScript
1
<li key={this.props.id} onClick={this.getPokeBlock.bind(this)}>

Либо использования "припаянных" к экземпляру класса методов:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
getPokeBlock = () => {
        const pokeImg = (typeof this.state.pokemonImg == undefined) ? '1' : this.state.pokemonImg;
        const pokeUrl = this.props.url;
        const pokeIndex = this.state.pokemonIndex;
        const pokeName = this.props.name.split(' ').map(letter => letter.charAt(0).toUpperCase() + letter.substring(1)).join();
        this.props.onPokeBlockInfDirect({
            pokeImg: pokeImg,
            pokeUrl: pokeUrl,
            pokeIndex: pokeIndex,
            pokeName: pokeName,
        });
    }

Добавлено через 36 секунд
Пока писал, уже Egor.S ответил

@Iangyl · 19.06.2020, 15:42 **[ТС]**

Спасибо! У меня заработало.
Появился встречный вопрос: почему при передачи того же this.state.pokemonImg в рендер, не происходит ошибки?

Добавлено через 13 минут
А всё - до меня дошло!
Я создал Function Declaration, а она срабатывает на самом начале, когда state - undefined, а сделав с неё Function Expression я её вызвал именно в тот момент, когда в state было значение выбраного компонента.

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

Всё тот любимый undefined

Решение

Решение

@Iangyl 32 / 34 / 21 Регистрация: 31.03.2018 Сообщений: 495
	19.06.2020, 15:42 [ТС]
	Спасибо! У меня заработало. Появился встречный вопрос: почему при передачи того же `this.state.pokemonImg` в рендер, не происходит ошибки? Добавлено через 13 минут А всё - до меня дошло! Я создал Function Declaration, а она срабатывает на самом начале, когда state - undefined, а сделав с неё Function Expression я её вызвал именно в тот момент, когда в state было значение выбраного компонента. 0