@Danila232

Почему не берутся данные из Props при вызове функции ПО КЛИКУ?

В общем схема такая:
Есть файлы - App(родительский Компонент) / СharList(список карточек) / CharInfo(блок с инфой той карточки, на которую кликнули)

В App находятся 2 других компонента, общий state, с которым они работают и функция, которая записывает в этот state id-шник
Эту функцию я передал в СharList, и по клику на карточки, рендерящиеся в СharList - через 'state-lifting' происходит запись id конкретной карточки в общий state, который в App.
В свою очередь, компонент CharInfo получает в свои Props эту инфу(id) из общего State из App, получает, записывает уже в СВОЙ state - делает запрос на сервер уже по полученному id.

То есть схема такая - кликаешь на карточку в СharList => её id записывается в родительский state в App => оттуда его себе в Пропсы берёт CharInfo, делает по нему запрос, ну и рендерит полученный результат.

// App
import React, {Component} from 'react';
import CharList from "../charList/CharList";
import CharInfo from "../charInfo/CharInfo";

class App extends Component{

    // начальный рандомный id, чтобы в CharList при загрузке страницы не было пусто
    state = {
        characterId: 1017295,
    }

    setCharacterId = async (id) => {
        await this.setState({characterId: id})
    }
 
    render(){
        return (
            <div className="app">
                   <CharList setCharacterId={this.setCharacterId}/>
                   <CharInfo characterData={this.state}/> 
            </div>
        )
    }
}
export default App;


//CharList 
import React, {Component} from 'react';

class CharList extends Component{
    state = {
        dataCards: {}
    }

    //  СПИСОК КАРТОЧЕК
    charInfo = new CharInfo() // Класс с функцией cardRender()
    render(){
        const cardDataList = Array.from(this.state.dataCards);  
        const cards = cardDataList.map(card => {
            return (
                    <li 
                        className="char__item" 
                        key={card.id} 
                        // State-lifting - по клику вызываем Функцию, которая передаёт в ГЛОБАЛЬНЫЙ State конкретный id
                        onClick={() => {this.props.setCharacterId(card.id); this.charInfo.cardRender()}} // ОШИБКА во 2й Функц., почему то в componentDidMount() - cardRender() работает. А при кликах - нет
                        > 
                        <img src={image} alt="abyss"/>
                        <h3 className="char__name">{name}</h3>
                        <p className='char__descr'>{description}</p>
                    </li>
            )
        }) 

        return(
            <ul className="char__list">
                {cards}
            </ul>
        )
    }
}

export default CharList;


//CharInfo 
import { Component } from 'react';
import Resource from '../../api/data.jsx';

class CharInfo extends Component{

    state = {

    }

    cardData = new Resource() // Класс в котором хранятся Функции, делающие ЗАПРОСЫ НА СЕРВЕР
    cardRender = async () => {
        await this.cardData.getOneCharackter(this.props.characterData['characterId']).then(
            data => {
                this.setState(
                        {name: data.data.results[0].name,
                        description: data.data.results[0].description ? data.data.results[0].description : 'NO DATA',
                        image: data.data.results[0].thumbnail.path + '.' + data.data.results[0].thumbnail.extension,
                        homepage: data.data.results[0].urls[0].url,
                        wiki: data.data.results[0].urls[0].url,}
                )
            }
        )
    }
    
    // Начальный запуск cardRender() при "монтировании"  - cardRender работает. А вот при клике из CharList - нет
    componentDidMount(){
        this.cardRender()
    }

    render(){
        const cardState = this.state;
        return (
            <div className="char__info">
                <div className="char__basics">
                    <img src={cardState.image} alt="abyss"/>
                    <div>
                        <div className="char__info-name">{cardState.name}</div>
                        <div className="char__btns">
                            <a href={cardState.homepage} className="button button__main">
                                <div className="inner">homepage</div>
                            </a>
                            <a href={cardState.wiki} className="button button__secondary">
                                <div className="inner">wiki</div>
                            </a>
                        </div>
                    </div>
                </div>
                <div className="char__descr">
                    {cardState.description}
                </div>
            </div>
        )
    }
}

export default CharInfo;


И ВОТ В ЧЁМ ПРОБЛЕМА: в CharInfo функция, которая берёт переданные props из App и по ним рендерит результат - это cardRender(). Изначально при загрузке страницы она запускается в componentDidMount() и ВСЁ РАБОТАЕТ.
Ошибка происходит ПРИ КЛИКЕ на карточку из СharList, а точнее - почему то функция не видит prop characterData(30 строчка в App). При чём в консоли разраба видно, что characterData передан, но почему то функция при клике не может его прочитать, и видит его как undefined:
6623d33f639d9135879999.png

Я лично думаю, что ошибка в файле CharList - в строчке, где вызываются 2 функции на onClick()

Вот так вот. Понимаю, что наверное не очень всё понятно, но там такой принцип, что текстом сложно объяснить, я постарался сделать понятней, например удалил часть кода из CharList - вам просто стоит знать, что этот компонент создаёт список карточек.
Если что спрашивайте, поясню что там за что отвечает) ну и буду очень благодарен за помощь, сам что-то не пойму, как это исправить
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы