Как отрисовать данные которые приходят асинхроно?

Question

[MarEeeeee]

Привет. Получаю данные из бд. Требуется отрисовать элементы как только они будут получены. Не понимаю как сделать это.
Мой компонент выглядит вот так

import React from 'react'
import  firebase from 'firebase';


class ListOfLecture extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            lectures:{},
            isLoading: false,
        }                    
      }



      async componentDidMount(){
        this.setState({
            lectures:(await firebase.database().ref('lectures/').once('value')).val(),
            isLoading: true
        }); 
    }


      render(){
          return(
              <div>
                  {
                     Object.keys(this.state.lectures).fill().map( (item,i)=>{
                         console.log(item, i)
                         return(<span key = {i}>{item}</span>)
                     })
                  
                  }
              </div>
          )
      }
}
export default ListOfLecture;

Значение внутри item undefined. я понимаю почему так происходит, но не понимаю как пофиксить

Comments

[0xD34F]

Object.keys(this.state.lectures).fill().map( (item,i)=>{

Значение внутри item undefined. я понимаю почему так происходит, но не понимаю как пофиксить

нет слов

[MarEeeeee]

0xD34F, Да, вы правы, глупо вышло.....

[MarEeeeee]

0xD34F, Может быть вы могли бы прокомментировать, на сколько верно записывать данные в state вот так в async componentDidMount(). К сожалению, не могу оценить на сколько это корректное решение.

[Александр]

MarEeeeee, Лучше еще || {} добавить, чтобы не рухнуло. Ну и isLoading навечно останется true.

Answer 1

[tehfreak]

Вот полная версия требуемого компонента с индикатором загрузки и обработкой ошибки:

class Lectures extends React.PureComponent {

    state = {
        lectures: null,
        lecturesError: null,
        lecturesPending: true,
    }

    async componentDidMount() {
        await this.fetchLectures()
    }

    async fetchLectures() {
        this.setState({ lectures:null, lecturesError:null, lecturesPending:true })
        try {
            const lectures = (await firebase.database().ref('lectures').once('value')).val()
            console.log(lectures)
            this.setState({ lectures, lecturesError:null, lecturesPending:false })
        } catch (lecturesError) {
            console.error(lecturesError)
            this.setState({ lectures:null, lecturesError, lecturesPending:false })
        }
    }

    render() {
        const { lectures, lecturesError, lecturesPending } = this.state
        return (
            <section>
                <h1>Лекции</h1>
                {lecturesPending && (
                    <div>Загружаются...</div>
                )}
                {lecturesError != null && (
                    <div>Не удалось загрузить: {lecturesError.message}</div>
                )}
                {lectures != null && (
                    <ul>
                        {lectures.map((lecture) => (
                            <li
                                key={lecture.id}
                            >
                                {lecture.name}
                            </li>
                        ))}
                    </ul>
                )}
            </section>
        )
    }
}