javascript — приложение зависало при попытке отобразить и отобразить данные в React

Сбой приложения при попытке отобразить и отобразить данные в React

Так как вы получаете данные из асинхронной функции, вам нужно использовать условное выражение для рендеринга только после получения данных. У вас не будет никаких данных о начальном рендере, пока обещание не будет выполнено, следовательно, ваша программа аварийно завершает работу.

Есть несколько способов сделать это, и вы можете узнать больше об этом здесь https://reactjs.org/docs/conditional-rendering.html . Мой предпочтительный метод в вашем случае будет использовать cardList.length {amp}amp;{amp}amp; .

Я обновил ваш код ниже, чтобы использовать эту логику.

  render(){ let cardList = this.props.cards; return( {amp}lt;div className={'card-list'}{amp}gt; {amp}lt;div className={'card-list__controls'}{amp}gt; {amp}lt;Filter findTag={this.findTag.bind(this)}/{amp}gt; {amp}lt;Sort handleTableSort={this.handleTableSort.bind(this)}/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__head'}{amp}gt; {amp}lt;div className={'card-list__head_row'}{amp}gt;Image{amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__head_row'}{amp}gt;Tags{amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__head_row'}{amp}gt;Likes{amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__head_row'}{amp}gt;Comments{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; { cardList.length {amp}amp;{amp}amp; cardList.cards.map((card) ={amp}gt; {amp}lt;div className={'card-list__item'}{amp}gt; {amp}lt;div className={'card-list__item_row card-list__item--img'}{amp}gt; {amp}lt;img src={card.webformatURL} alt="javascript - приложение зависало при попытке отобразить и отобразить данные в React"/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__item_row card-list__item--tags'}{amp}gt; {amp}lt;div className={'tags-wrap'}{amp}gt; { card.tags.split(', ').map((tag) ={amp}gt; {amp}lt;span{amp}gt;{tag}{amp}lt;/span{amp}gt; ) } {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__item_row card-list__item--likes'}{amp}gt; {amp}lt;span{amp}gt;{card.likes}{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className={'card-list__item_row card-list__item--comments'}{amp}gt; {amp}lt;span{amp}gt;{card.comments}{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) } {amp}lt;/div{amp}gt; ) } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector