hello fetch my data is making more than one request, why?

I left the code below that I got my data from. More than one request is processed at the time of refreshing the page, the reason may be why, if you can help I would appreciate it. have a nice day.

import React, { useEffect, useState } from "react";
import axios from "axios"
import Cookies from "universal-cookie"

const Entry = React.createContext();

export const EntryProvider = ({ children }) => {
    const [post, setPost] = useState();
    const cookie = new Cookies()
    const token = cookie.get("acsess_token")
   

    const getAll = () => {
        axios.defaults.headers.common['Authorization'] = token;
        const entry = axios.get("/api/entry/entry", {
            headers: {
                "Authorization": token
            }
        })
            .then((response) => {
               const data = response.data.data
                data.map(element => {
                    setPost(element)
                });
               setPost(data)    
            })
            .catch((err) => { console.log(err) })
    }
 useEffect(() => {
    getAll()
 },[getAll])
    return (
        <Entry.Provider value={{post}}>
            {children}
        </Entry.Provider>
    );


};

export const userEntry = () => {
    return React.useContext(Entry);
};

enter image description here

Upvotes: 0

Views: 34

Answers (1)

S.Marx
S.Marx

Reputation: 1022

Instead adding getAll in the array dependency, remove it

useEffect(() => {
  getAll()
},[getAll])

Like this:

useEffect(() => {
 getAll()
},[])

Why that?

Because the useEffect will be execute it every time the component renders and because of having getAll in the dependency array it will execute it again

Upvotes: 1

Related Questions