@drotsyk

Как вызвать функцию чтобы не было ошибки Maximum update depth exceeded?

Я создаю список и для каждого элемента списка хочу вставить картинку которая возьмется из State по номеру current.
Как я понял каждый раз когда я создаю элемент списка и вызываю функцию randomCat() которая плюсует Current происходит перерендериг и дальнейшая ошибка. Как и где вызвать функцию, чтобы она сработала определенное количество раз равное количеству элементов списка?

import React from 'react'


export class Cat extends React.Component {
  state = {
    catsImg: [
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495636.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495625.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495622.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495619.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495616.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495613.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495592.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/495579.svg",
      "https://storage.googleapis.com/ck-kitty-image/0x06012c8cf97bead5deae237070f9587f8e7a266d/336916.svg"
    ],
    current: 0,
  }

  randomCat = () => {
    if(this.state.current === this.state.catsImg.length -1){
        this.setState({
          current: 0
      })
    }else(
      this.setState((prevState) => ({
        current: prevState +1
      }
    ))
    )
  }

  render() {
    const { current, catsImg} = this.state
    const { cats } = this.props
    return(
      <ul className="catsList">
        {console.log(current)}
        {cats.map(cat => (
          <li key={cat.description} className='catsItem'>
            {this.randomCat()}
            <img src={catsImg[current]} alt=""/>
            <div>{cat.description}</div>
            <div>{cat.type}</div>
            <div>{cat.total}</div>
            <button>Buy</button>
            {' '}
            <button >Read Info</button>
          </li>
        ))}
      </ul>
    )
  }
}
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Вам вообще не надо вызывать эту функцию, если только вы не скрываете задачу, которая стоит перед вами на самом деле. Вы уже применили map - он как раз "для каждого элемента списка".

Если нужен индекс - он в коллбек map'a передаётся вторым параметром:

{cats.map((cat, index) => (
  <li key={cat.description} className="catsItem">
    <img src={catsImg[index]} alt=""/>
    ...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@romankononovich
Мне кажется в целом не очень хорошая практика менять state через рендер {this.randomCat()}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы