Слишком много повторных рендеров ReactJS

Question

Проблема в этом коде

import React, {useState} from "react";
import {Button, Card, Col, Container, Row} from "react-bootstrap";

let getPokemones = () => {
    fetch('https://pokeapi.co/api/v2/pokemon/')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            return Array(data.results)
        })
}

function Pokemones() {
    const [pokemones, setPokemones] = useState([]);
    const [pokemonesCols, setPokemonesCols] = useState([]);
    setPokemones(getPokemones())

    return (
        <>
        </>
    );
}

export default Pokemones;

Получаю ошибку

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Если убрать эту строчку - setPokemones(getPokemones()), то ошибка пропадает.

Я думаю, что эта функция вызывается один раз при рендере но получаю ошибку которая говорит что много рендеров.

Answer 1

Если вы создаете React-компонент с помощью функции, то эта функция будет вызываться при каждой отрисовке компонента, а каждое изменение состояния (в вашем случае вызов setPokemones) инициирует новую перерисовку, вот и возникает замкнутый круг в вашем коде.

Обычно для выполнения api-запросов используют хук useEffect с пустым массивом во втором аргументе. Хук отслеживает изменения элементов этого массива для повторного вызова эффект-функции, но если массив пустой, то функция будет вызвана только при первой отрисовке (что нам и нужно).

import React, { useState, useEffect } from 'react'

function Pokemones() {
  const [pokemones, setPokemones] = useState([])

  useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/')
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        setPokemones(data.results)
      })
  }, [])

  return (
    <ul>
      {pokemones.map((pkmn, indx) => <li key={indx}>{pkmn.name}</li>)}
    </ul>
  )
}

export default Pokemones

БЛОГ НА HUSL

Слишком много повторных рендеров ReactJS

Ответы (1 шт):