Tengo una función asíncrona simple a la que quiero que se llame cuando se carga una página que obtiene datos y actualiza mi contexto.
import { useContext } from 'react' import { ContentSlotsContext } from '../commerce-api/contexts' export default async function getSlots() { const { slots, setSlots } = useContext(ContentSlotsContext) const response = await fetch('https://jsonplaceholder.typicode.com/todos'); const data = await response.json(); setSlots(data); }Estoy tratando de llamarlo así:
useEffect(() => { getSlots() })slots y setSlots son un setState con el que se inicializa el contexto.
Pero no se llama. Cuando lo llamo fuera de useEffect, funciona pero se repite infinitamente debido a que se vuelve a renderizar constantemente.
El problema es que está llamando a useContext desde una función que no es un componente de función de reacción o un gancho personalizado (vea las reglas de los ganchos ). Hay un complemento ESLint útil, eslint-plugin-react-hooks , que advertirá contra esto.
Para solucionar el problema, puede pasar setSlots como parámetro a getSlots :
export default async function getSlots(setSlots) { const response = await fetch('https://jsonplaceholder.typicode.com/todos'); const data = await response.json(); setSlots(data); } y llame a useContext antes de useEffect , en el nivel superior de su componente de función (también una regla de ganchos ), con una matriz de dependencias vacía como segundo argumento, por lo que el efecto solo se activa una vez (vea la nota en los documentos de useEffect ):
.. const { setSlots } = useContext(ContentSlotsContext); useEffect(() => { getSlots(setSlots); }, []); ..