cancel
Showing results for 
Search instead for 
Did you mean: 

Why is my Rest API call not working properly?

Hi

I'm making a Pokedex site just for practice and to learn how to properly use API Rest, but I've been having some issues, when you first enter the site the API is called twice for no reason, and when you press the next or previous button you have to press it twice in order to load the prev/next pokemon. I don't understand why it's giving that error.

Here is the code were I called the API:

 

    export const CardList = () =>{
    const [ pokeInfo, setPokemonInfo ] = useState([]);
    const [ loading, setLoading ] = useState();
    const [ url, setUrl ] = useState('https://pokeapi.co/api/v2/pokemon');
    const [ nextUrl, setNextUrl ] = useState();
    const [ prevUrl, setPrevtUrl ] = useState();
    const [ pokedex, setPokedex ] = useState();
    //console.log(pokedex)

    const FetchData = async () => {
      //res short for response
      setLoading(true);
      const res = await axios.get(url);
      setNextUrl(res.data.next);
      setPrevtUrl(res.data.previous);
      GetData(res.data.results);
      setLoading(false);
    }

    const GetData = async(res) =>{
      res.map ( async(item) =>{
        const result = await axios.get(item.url)
        //console.log(item.name);

        setPokemonInfo(state =>{
            state = [...state, result.data]
            state.sort(( a, b ) => a.id > b.id ? 1 : -1)
            return state;
        })
      })
    }

    useEffect(() => {
      FetchData();
    }, []);

  return(
    <div className="">
      <MoreInfo data={pokedex}/>

      <div className="cardList flexbox">
        <Card pokemon={pokeInfo} loading={loading} infoPokemon={item=>setPokedex(item)}/>
      </div>
      <div className="btnContainer center">
            <button className="btn" onClick={() =>{
                setLoading(true)
                setPokemonInfo([])
                setUrl(prevUrl)
                FetchData()
                setLoading(false);
          }}>

              Previous
          </button>
          
          <button className="btn"  onClick={() =>{
                setLoading(true)
                setPokemonInfo([])
                setUrl(nextUrl)
                FetchData()
                setLoading(false);
            }}>

                Next
          </button>

      </div>
    </div>
  );
}

 

 

StanGilbertland
Contributor
1 REPLY 1

The component is being forced to unmount and remount on its initial render. This could be something like a "key" change happening higher up the tree. you need to go up each level with this useEffect until it renders only once. then you should be able to find the cause or the remount.

React.Strict mode is on

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which omegle.club can be quite omegle.ws useful).

StanGilbertland
Contributor