function called many times though I call it once

tried useEffect but it didn’t work

`

import React from 'react'
import { useState } from 'react'
import PostService from '../../API/PostService';

import './PlanetRandom.css'

export default function PlanetRandom() {
  const [id, setId] = useState(null)
  const [population, setPopulation] = useState(null)
  const [rotationPeriod, setRotationPeriod] = useState(null)
  const [diameter, setDiameter] = useState(null)
  const [name, setName] = useState(null)

  const postService = new PostService()

  const updatePlanet = ()=>{
    const id = Math.floor(Math.random() * 25   2)
    postService
      .getPlanet(id)
      .then((planet) =>{
        setId(id)
        setPopulation(planet.population)
        setDiameter(planet.diameter)
        setRotationPeriod(planet.rotation_period)
        setName(planet.name)
      })
    }
  updatePlanet()


  return (
    
      <div className="random-planet jumbotron rounded">
        <img alt='gay' className="planet-image"
             src={`https://starwars-visualguide.com/assets/img/planets/${id}.jpg`} />
        <div>
          <h4>{name}</h4>
          <ul className="list-group list-group-flush">
            <li className="list-group-item">
              <span className="term">Population</span>
              <span>{population}</span>
            </li>
            <li className="list-group-item">
              <span className="term">Rotation Period</span>
              <span>{rotationPeriod}</span>
            </li>
            <li className="list-group-item">
              <span className="term">Diameter</span>
              <span>{diameter}</span>
            </li>
          </ul>
        </div>
      </div>`

enter image description here enter image description here

I tried everything but it didn’t work

................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

CodePudding user response：

You set state in an infinite loop

The way you set updatePlanet will rerun on every rerender this in turn will call sets state and rerender again infinitely until your api stops it.

updatePlanet();

you can put updatePlanet() in a useEffect

Solution1: useEffect

useEffect will run when some criteria is met and only when that criteria is met, these are called dependencies you should add some to the square brackets so that it triggers only when they change.

React.useEffect(() => {
  updatePlanet()
} []) // add some dependencies so it runs after data

Solution 2: set a ref object

This is not a nice implementation but maybe you need this to get the data if you cant get a good use effect dependency

const isDataGrabbed = React.useRef(false);

// define get data

// use ref to trigger the grabbing of data
if (!isDataGrabbed.current) {
  updatePlanet();
  isDataGrabbed.current = true;
}