En mi proyecto React, intento obtener algunos datos de una base de datos cuando se presiona un enlace. Cuando hago esto, puedo ver que mis accesorios no están definidos, lo que hace que se represente una página de React en blanco.
Verifiqué que la id no estaba indefinida como accesorio al iniciar sesión cuando se presiona el enlace. Sin embargo, cuando lo registro en el gancho useEffect() no está definido. ¿Cómo puedo hacer la solicitud solo una vez que se hayan pasado los accesorios?
const user = useContext(UserContext); const id = props.followerId; useEffect(() => { axios .get(`http://localhost:3000/users/followers/${id}) .then((res) => { if (res.status === 200) { user.setFollower(res.data); } }) .catch((err) => { console.log(err); }); } }, []);Puede agregar una id en la matriz de dependencia para que, si la id cambia, useEffect se ejecute
y agregue una cláusula de protección en useEffect para que la solicitud solo se realice si hay una id como:
const id = props.followerId; useEffect(() => { if (id) { // IF GUARD CLAUSE ONLY RUN IF ID IS SOMETHING axios .get(`http://localhost:3000/users/followers/${id}`) .then((res) => { if (res.status === 200) { user.setFollower(res.data); } }) .catch((err) => { console.log(err); }); } }, [id]); // ADD ID IN DEPENDENCY ARRAYDebe agregar id como dependencia en useEffect. Además, agregue un control booleano en id también.
const user = useContext(UserContext); const id = props.followerId; useEffect(() => { !!id & & axios .get(`http://localhost:3000/users/followers/${id}) .then((res) => { if (res.status === 200) { user.setFollower(res.data); } }) .catch((err) => { console.log(err); }); } }, [id]);useEffect con una matriz vacía significa que solo se ejecuta cuando se monta el componente. si usa id en la matriz de dependencia useEffetc, se ejecutará cada vez que id cambie su valor y también en el montaje. entonces, si existe una identificación, llame a getFollower . como esto
const user = useContext(UserContext); const id = props.followerId; useEffect(() => { const getFollower=(uid)=>{ axios.get(`http://localhost:3000/users/followers/${uid}`) .then((res) => { if (res.status === 200) { user.setFollower(res.data); } }) .catch((err) => { console.log(err); }); } } if(id) getFollower(id) }, [id]);