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

Question

[Danila232]

В общем последовательность такая: 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;

*Да, я знаю что на классах, без хуков - почти никто уже не пишет, но я ток начал учить React, так что вот так вот

Comments

[0xD34F]

я ток начал учить React

Зря.

Сперва js надо было освоить.

Answer 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>
)

Comments

[Danila232]

да, глупая ошибка на самом деле) я просто к самому state обратился, а не к объекту внутри него(this.state.dataCards). В электричке делал, не заметил
Не пойму только, почему там без метода Array.from() - всё ломается, т.е ошибку выдаёт.
я конкретно про строчку const cardDataList = Array.from(this.state.dataCards);

ведь в dataCards у меня УЖЕ массив объектов записан. Массив же? или массивоподобная коллекция
просто я думал что обычный массив, и удивился что мне надо через Array.from() его хардкодить

[Danila232]

ещё буду благодарен, если подскажете - почему когда я записываю {cards} без обёрточного тега - выдаёт такую ошибку. Приходится оборачивать в "<>>"

ошибку гуглил, но норм инфы не нашёл шо то. Кстати я делал и {...cards} как вы писали в ответе выше, но разницы никакой. Вроде это и необязательно, можно сразу массивом вставлять в return

[Дмитрий Перевозкин]

Danila232, Такс да, упустил, вам еще нужно <>> сделать в return() т.к должна быть обертка родитель
Условно:

return (
  <div><div>
  <div><div>
  <div><div>
)
// будет ошибкой

return (
<>
  <div><div>
  <div><div>
  <div><div>
</>
)
// будет правильно если внутри return более 1 элемента, нужно обернуть, в контейнер чтобы был 1 узел

Да верно, можно массив сразу {cards} но обертка нужна, ибо при развертывании узлов в return() будет более 1

И еще вот смотрю Array.from это не обязательно, это что-то не так с данными видимо, ошибка говорит, что найден объект с ключами cards, он считает что это не массив

import React, { useState, Component } from 'react'

class Header extends Component {
  state = {
    array: []
  }

  getCards() {
    this.setState(() => ({array: [{name: 123, id: 123}]}));
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({array: [{name: 123, id: 123}]})
    })
  }

  render() {
    const cards = this.state.array.map(card => {
          return (
            <div>
               <p>{card.id}</p>
               <p>{card.name}</p>
            </div>
          )
        })
    return (
      <>
        {
          cards
        }
      </>
    )
  }
}

const App = () => {
  const [count, setCount] = useState(0)
  
  return (
    <>
      <Header></Header>
    </>
  )
}

export default App

вот очень утрированный пример, писал в Playground но он выводит то что я ожидаю, разберите посмотрите, писал примерно так же, создав const cards чтобы проверить сработает ли, сработало, теперь вам осталось проверить что с вашими данными и как она выглядят можете в любом React Playground открыть и вставить код в файл App

[Danila232]

Дмитрий Перевозкин, спасибо за ответ)