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

Question

[Tash1moto]

Подскажите как правильно грузить данные чтобы компонент ререндерился после загрузки данных, не используя 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")
)

Answer 1

[Антон Спирин]

Вообще использование в 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>
  );
}

Comments

[Tash1moto]

то что надо, спасибо

[Иван]

{!isAllDataReady && <Preloader />}
       {isAllDataReady && (
         <div>
           <h4>App component</h4>
           {data[0].title}
         </div>
       )}

Объясните пожалуйста,как работает эти конструкции? !isAllDataReady && и второе где &&

[Антон Спирин]

Иван, всего лишь условие.
isSomeCondition && <Component />
Если isSomeCondition приводится к truе, то на рендер отдается второй операнд, компонент Component.
Простой пример:
alert(5 && 10);
так как 5 приводится к true, выражение возвращает 10
Второй пример:
alert(0 && 10);
так как 0 приводится к false, выражение возвращает этот операнд. Причем возвращается его реальное значение, а не приведенное.

Цепочка может быть любой длины и либо прервется на операнде вернувшем false и возвратит его значение, либо дойдет до конца и возвратит значение последнего операнда.
Тут вернет 10:

alert(1 && 2 && 3 && 4  && 5  && 6  && 7  && 8  && 9  && 10);

Тут false:

alert(1 && 2 && 3 && false && 5  && 6  && 7  && 8  && 9  && 10);

Для рендера в react, важно чтобы условный операнд не возвращал 0 иначе в случае когда не надо отрисовывать компонент, будет отрисован 0. undefined, false, null в свою очередь игнорируются.

Пример. Мы хотим отрисовывать компонент только когда в массиве сеть элемементы:

return (
  ...
  {arr.length && <SomeComponent />}
);

Тут в случае нулевой длины будет отрисован 0, возвращаемый первым операндом.
Пути решения:

const shouldShowSomeComponent = !!arr.length;

return (
  ...
  {shouldShowSomeComponent && <SomeComponent />}
);

или:

const shouldShowSomeComponent = arr.length > 0;

return (
  ...
  {shouldShowSomeComponent && <SomeComponent />}
);

[Иван]

Антон Спирин, Благодарю за реально чёткий ответ!

Answer 2

[0xD34F]

render() {
  const [ post ] = this.state.data || [];

  return (
    <div>
      <h4>App component</h4>
      {post ? post.title : 'пока ничего не загрузилось'}
    </div>
  );
}