Intento llamar a un método en la clase de servicio desde MainPanel con useEffect hook:
Aquí está mi panel principal:
function MainPanel() { const [customers, setCustomers] = useState([]); useEffect(() => { const getCustomers = async () => { const customers = await getCustomerList(); setCustomers({ customers }); console.log(customers) }; getCustomers() }, []); return ( <div className="App"> {/* do something */} </div> ); } export default MainPanel;Y aquí está el método de servicio que llamé desde useEffect:
export async function getCustomerList() { axios.get("http://localhost:8080/customer", { params: { id: 1 } }) .then(response => console.log(response.data)) }En este escenario, useEffect funciona pero funciona dos veces y console.log se imprime dos veces (2 veces el valor correcto del registro y 2 veces indefinido).
Si solo obtengo los datos con la declaración de devolución en lugar de imprimirlos en la consola como
export async function getCustomerList() { axios.get("http://localhost:8080/customer", { params: { id: 1 } }) .then(response => {return response.data}) }Sucede lo mismo, pero esta vez la respuesta es indefinida . Sé que son problemas separados, pero solo necesito entender una forma adecuada de obtener datos y usarlos en useEffect solo una vez.
Cómo puedo lograrlo ?
Debe agregar return en su función getCustomerList .
export async function getCustomerList() { return axios.get("http://localhost:8080/customer", { params: { id: 1 } }); }Y obtener datos como los siguientes:
const res = await getCustomerList(); setCustomers({ res.data.customers });Probablemente React.StrictMode está disparando useEffect dos veces para devolver los valores que probablemente debería hacer como sugiere la otra respuesta ( @Liki Crus)