Why is my Rest API call not working properly?

StanGilbertland — Fri, 06 May 2022 05:18:40 GMT

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>
  );
}

Re: Why is my Rest API call not working properly?

StanGilbertland — Tue, 24 May 2022 12:19:06 GMT

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).

Re: Why is my Rest API call not working properly?

joseemily — Fri, 28 Oct 2022 11:36:14 GMT

Hey,

API failures happen for multiple reasons, but most of them can be boiled down to these three culprits: Software changes happening too quickly. Breakdowns in communication among teams. Bad data that is incompatible with your API.

topic Re: Why is my Rest API call not working properly? in cybersource APIs

Why is my Rest API call not working properly?

Re: Why is my Rest API call not working properly?

React.Strict mode is on

Re: Why is my Rest API call not working properly?