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

Question

[drotsyk]

Я создаю список и для каждого элемента списка хочу вставить картинку которая возьмется из 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>
    )
  }
}

Comments

[Вадим]

А для чего Вам переменная current в стэйте?

[drotsyk]

Вадим, картинка из массива берется по текущему current, когда массив заканчивается то с помощью current начинается присвоение заново

Answer 1

[0xD34F]

Вам вообще не надо вызывать эту функцию, если только вы не скрываете задачу, которая стоит перед вами на самом деле. Вы уже применили map - он как раз "для каждого элемента списка".

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

{cats.map((cat, index) => (
  <li key={cat.description} className="catsItem">
    <img src={catsImg[index]} alt=""/>
    ...

Comments

[drotsyk]

0xD34F я удалил вызывание функции и теперь {console.log(current)} показывает только 2 вызова current: 0, а всем элементам списка присвоилась только первая картинка

[0xD34F]

drotsyk, ответ дополнен.

[drotsyk]

0xD34F, в массиве только 9 картинок, нужно, чтобы когда картинки заканчивались присвоения из массива начиналось с 0 картинки

[0xD34F]

drotsyk, берите остаток от деления на длину массива с картинками: src={catsImg[index % catsImg.length]}.

[drotsyk]

0xD34F,
У меня еще вопрос. Создал функцию takeInfo которая при клике на какой то товар сравнивает его цену с ценой из this.props.cats и возвращает мне товар который подошел, чтобы потом его вывести куда то, но выскакивает ошибка "Expected an assignment or function call and instead saw an expression". Почему? я же и не должен ничего возвращать, а просто записывать объект в state, чтобы дальше его использовать

export class Cat extends React.Component {
  state = {
    catsImg: imgArr,
   
    kittie: this.props.cats,
    catInfo: [ ],
  }

  takeInfo = (catPrice) => {
    this.setState(state => ({
      catInfo: {...state.kittie.filter(cat=>{
        catPrice === cat.total
      })}
    }))
  }

кнопка выглядит так

<button onClick={() => {
              this.takeInfo(cat.total)
            }}>Buy</button>

[0xD34F]

У меня еще вопрос.

drotsyk, и хватает же у вас наглости.

Ничего вы от меня больше не услышите - уж здесь-то точно. Да и где-то ещё - тоже вряд ли.

Answer 2

[romankononovich]

Мне кажется в целом не очень хорошая практика менять state через рендер {this.randomCat()}