Tengo esta función de devolución de llamada dentro de useeffect. Quiero pasar diferentes props.id de padre js a este archivo, así que obtengo diferentes datos const res = await axios.get("messages/get-all-messages/?receiver=" + props.id, config ); no se recuerda cuando paso un nuevo props.id de parent.js ¿cómo puedo volver a llamar a esta API cuando paso un nuevo props.id
function chat(e) { e.preventDefault() const config = { headers: { Authorization: `token ` + localStorage.getItem("token"), }, }; const data = { receiver: props.id, message: inputField }; axios .post("messages/send-message/", data, config) .then((res) => { getData(); }) .catch((error) => { console.log(error); }); } const getData = useCallback(async () => { const config = { headers: { Authorization: `token ` + localStorage.getItem("token"), }, }; const res = await axios.get( "messages/get-all-messages/?receiver=" + props.id, config ); undefined which will crash. if (res.status === 200) { if (mountedRef.current) { setdata(res.data.); } } }, []); useEffect(() => { if (mountedRef.current) { getData(); } return function cleanup() { mountedRef.current = false; }; }, [getData]);useCallback(fn, deps) useCallback devolverá una versión memorizada de la devolución de llamada que solo cambia si una de las dependencias ha cambiado. Por lo tanto, debería haber sido agregado props.id como dependencias para usar ganchos de devolución de llamada
const getData = useCallback(async () => { // do something }, [props.id])Puede agregar props.id a la llamada useEffect, todo lo que pase como argumento en la matriz garantizará que se llame a useEffect. Por lo tanto, cada vez que props.id actualice la lógica en useEffect se ejecutará.
"React compara el valor actual de la dependencia y el valor del renderizado anterior. Si no son iguales, se invoca el efecto".
Fuente útil: https://dev.to/nibble/what-is-useeffect-hook-and-how-do-you-use-it-1p9c
useEffect(() => { if (mountedRef.current) { getData(); } return function cleanup() { mountedRef.current = false; }; }, [getData, props.id]);