Как загрузить данные до отрисовки в React?

Question

[Никита]

Привет, как-нибудь можно загрузить данные из Rest API до выполнения render, пробовал сделать с помощью componentDidMount, но данные подгружаются чуть позже, т.е страница пустая несколько секунд после загрузки, как с этой проблемой можно бороться?

Answer 1

[lnked]

`componentDidMount ` срабатывает после `render`, вы можете показать прелоадер пока данные грузятся, после загрузки покажете данные

class example extends React.Component {
  state = {
    data: [],
    isLoading: true,
  }

  componentDidMount() {
    fetch('example/url')
      .then(response => response.json())
      .then(data => this.setState({ data }))
  }

  render() {
    const { isLoading } = this.state

    if (isLoading) {
      return <div>Загрузка</div>
    }

    return data.map(item => <div key={item.id}>{item.name}</div>)
  }
}

Answer 2

[0xD34F]

Так дела не делаются. Страницу следует отрисовывать сразу, а пока данные не загрузились, пользователю показывают индикатор загрузки:

data ? <КакойТоКомпонентДляОтображенияДанных data={data} /> : <Preloader />

Answer 3

[Aniro]

Очевидно, что если данных нет - отображать нечего. Так что придется или придумать чем занять страницу до того как они подгрузятся - как вариант, добавить вэйтер. Или - использовать server-side рендеринг. componentWillMount тут не поможет - потому что запрос к API в любом случае занимает какое-то время.