@Danila232

Почему не рендерится React-компонент в методе render( )?

В общем последовательность такая: listData - это класс, в котором хранится функция getCharackters(), которая берёт объект данных с APIшки - и возвращет его.

Ну и в общем я сделал функц. getCardsList() - которая записывает в State пер.cardListArray - это уже только нужные данные - массив объектов персонажей(на 2м скрине)

В render() я беру этот массив данных из state, прохожусь по нему map-ом и деструктуризацией беру конкретно нужные позиции из объектов - name, description, image. Ну и ставлю их 'рендерящемуся' элементу. Ну и в итоге у нас должен быть массив нужных элементов - cards

И этот массив я ставлю в return метода render(). Но что-то не работает, ошибку даже не выдаёт, просто как будто этого конечного массива нет. Подскажите, в чём дело?
*я там ещё 2 вопросика по коду в комментах оставил, буду благодарен если поясните

import React, {Component} from 'react';
import './charList.scss';

import Resource from '../../api/data.jsx';


class CharList extends Component{

    state = {
        dataCards: {}
    }


    listData = new Resource()
    getCardsList = async () => {  // Тут нужна конструкция async-await? Влияет ли она на тут на что-то ?
        await this.listData.getCharackters().then(
            arr => {
                const cardListArray = arr.data.results;
                this.setState(() => ({dataCards: cardListArray}))
                //console.log(cardListArray) - массив объектов перссонажей
            }
        )
    }
    
    componentDidMount(){
        this.getCardsList()
    }


    render(){
        const cardDataList = Array.from(this.state);  // почему то без Array.from() - возвращает ошибку. Хотя по-идее это и так уже массив
        const cards = cardDataList.map(card => {
        let [name, description, image] = [card.name, card.description, card.thumbnail.path + '.' + card.thumbnail.extension]
            return (
                <div className="char__list">
                    <ul className="char__grid">
                        <li className="char__item">
                            <img src={image} alt="abyss"/>
                            <div className="char__name">{name}</div>
                        </li>
                    </ul>
                    <button className="button button__main button__long">
                        <div className="inner">{description}</div>
                    </button>
                </div>
            )
        })

        return(
            <div className='card-main'>
                {cards}
            </div>
        )

    }
}

export default CharList;


662135e537325686585357.png

*Да, я знаю что на классах, без хуков - почти никто уже не пишет, но я ток начал учить React, так что вот так вот
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 1
Ох, сложно на самом деле, я сам Vue разработчик, на React немного работал, но почему у вас в render функции какие-то константы, переменные, деструктуризация? У вас есть state, внутри render используется this.state и получайте доступ куда нужно, для обработки данные создавайте методы и через них проводите операции над массивами, советую к прочтению

UPD:
нашел видимо ошибку const cardDataList = Array.from(this.state);
Вы пытаетесь из this.state сделать массив? Или как?

Видимо нужно const cardDataList = Array.from(this.state.dataCards);

И если заработает

Я честно не компилятор и интерпретатор, но подсказывает что-то что нужно будет вместо:
return(
   <div className='card-main'>
      {cards}
   </div>
)

Сделать:
return(
   <div className='card-main'>
      {...cards} // Тут вам явно нужно будет либо раскрыть с помощью ... либо снова делать .map, 
      // хотя можно было намного короче сделать, но вы учитесь, делайте как можете, поэтому попробуйте так
   </div>
)
Ответ написан
Ваш ответ на вопрос

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

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