Tash1moto
@Tash1moto

Какие способы правильно загрузить данные в react компонент?

Подскажите как правильно грузить данные чтобы компонент ререндерился после загрузки данных, не используя forceUpdate и не подставлять в стейт болванки

import React from 'react'
import { render } from 'react-dom'
import axios from 'axios'
import "bootstrap/scss/bootstrap.scss"



class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {data:null} // неработает ошибка, нету 0 индекса
        // this.state = {data:[{title:"placeholder title"}]} // работает с такой болванкой, данные ререндятся после фетча данных
        this.loadData()
    }

    loadData(){
        axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(res=>{
                console.log("axios res data: ",res.data);
                this.setState({data:res.data})
            })
    }
    render() {
        return (
            <div>
            <h4>App component</h4>
            {this.state.data[0].title}
            </div>
        )
    }
}

render( 
    <div className = "container">
        <App/>
    </div>,
    document.getElementById("root")
)
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Вообще использование в render конструкций типа:
{this.state.data[0].title}
очень плохой стиль. По возможности избегайте его.
Чтобы компонент рендерился поле загрузки данных:
render() {
  const { data } = this.state;
  const isAllDataReady = data && data.length > 0;

  return (
    <div>
       {!isAllDataReady && <Preloader />}
       {isAllDataReady && (
         <div>
           <h4>App component</h4>
           {data[0].title}
         </div>
       )}
    </div>
  );
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы