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

Question

[Даниил Сугоняев]

При переходе на страницу мне необходимо получить данные по API. Но не совсем понятно как инициализировать запрос наилучшим образом. Обращался к API в componentDidMount() и отправлял в стейт, но это вызывает перерендеринг компонента и в доках считается нежелательно. Как лучше всего поступить в данной ситуации?

Answer 1

[0xD34F]

Обращался к API в componentDidMount() и отправлял в стейт, но это вызывает перерендеринг компонента и в доках считается нежелательно.

Это в каких доках? В тех, что известны мне, это прямо рекомендуется:

You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.

Comments

[Даниил Сугоняев]

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

[0xD34F]

Даниил Сугоняев, а вам известно значение слова immediately и разница между синхронными и асинхронными запросами?

[Даниил Сугоняев]

0xD34F, Известно, у меня асинхронный запрос. Я так понимаю в таком случае это считается хорошей практикой? Но рендеринг все равно срабатывает дважды. Изначально в стейте пустой объект соответственно и это может вызвать ошибку если я рендарю контент из этого стейта

[0xD34F]

Даниил Сугоняев,

рендеринг все равно срабатывает дважды

Ну и что? Это нормально.

Изначально в стейте пустой объект соответственно и это может вызвать ошибку если я рендарю контент из этого стейта

А может и не вызвать - это зависит от вас. Пока нет данных - показываете индикатор загрузки, данные пришли - отображаете данные. "Conditional rendering" - знакомо такое словосочетание?

[Даниил Сугоняев]

0xD34F, мне стало понятнее, спасибо

Answer 2

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

Обращался к API в componentDidMount() и отправлял в стейт

Все правильно.

но это вызывает перерендеринг компонента и в доках считается нежелательно

Покажите где вы это прочитали.

Пример из документации.

Comments

[Даниил Сугоняев]

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

[Даниил Сугоняев]

В доках советуют инициализировать в конструкторе, но у меня возникли проблемы в пробросом в стейт в таком случае. Хотел узнать есть ли еще лучшие варианты.

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

Даниил Сугоняев, вы видимо не поняли что там написано. Там имелось ввиду, что setState инициирует дополнительный render и лучше задавать начальное состояние в конструкторе или просто:

Component extends React.Component {
  state = initialState;
}

Асинхронные вызовы это совсем другой случай.

[Даниил Сугоняев]

Антон Спирин, Теперь я понял, спасибо