Estoy tratando de usar useEffect para recuperar datos cuando un componente se monta de la siguiente manera:
useEffect(() => {
axios.get(myUrl)
.then(response => {
setName(response.name);
setAge(response.age);
}).catch(error => {
console.log(error);
});
}, [myUrl, setName, setAge]);
setName y setAge provienen de un contexto de la siguiente manera:
import MyContext from './context';
const MyComponent = props => {
const {
setName,
setAge
} = useContext(MyContext);
Este problema es que las funciones, las matrices y los objetos se registran como dependencias "modificadas" en una llamada useEffect, por lo que termina en un bucle infinito donde está obteniendo esos datos una y otra y otra vez. ¿Puedo memorizar una función de un contexto para que solo se llame ese efecto una vez?
Nota: el consumidor de mi contexto está varios niveles por encima de este componente, así que supongo que no hay nada que pueda hacer allí.
2 respuestas
No hay forma de memorizar una función desde un contexto.
Dicho esto, puede usar un enlace personalizado para useMount, ya sea importándolo de react-use o simplemente mirando el código fuente allí y declarándolo usted mismo. A continuación se muestra cómo definir useMount y useEffectOnce y luego utilizar useMount como solución alternativa:
const useEffectOnce = (effect) => {
useEffect(effect, []);
};
const useMount = (fn) => {
useEffectOnce(() => {
fn();
});
};
useMount(() => {
axios.get(myUrl)
.then(response => {
setName(response.name);
setAge(response.age);
}).catch(error => {
console.log(error);
});
});
Con este enfoque, no necesita cambiar nada sobre su declaración de contexto, proveedor de contexto o consumidor de contexto.
Creo que debe definir contexto personalizado vinculado a algo como userId. Esto le proporcionará un identificador estable que cambiará solo cuando sea necesario.
Preguntas relacionadas
Nuevas preguntas
reactjs
React es una biblioteca de JavaScript para crear interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y tiene como objetivo ser eficiente y flexible.