Estoy tratando de hacer una solicitud de publicación en el montaje del componente. Pero si el usuario vuelve a cargar la página o cambia de estado, entonces se vuelve a llamar a la función ya que soy useEffect y envía la solicitud nuevamente. Pero quiero algo mejor donde la solicitud de publicación se debe realizar una vez y si incluso la página se actualiza, no se debe volver a llamar si se ha llamado.
Estoy usando el componente base de la función. y haga solicitudes de publicación usando redux.
const Main = () => { // .... // Here I'm forcing user to login if there's user is logged in then want to make a silent post request, But it sends request everytime on state change. useEffect(() => { getLocalStorage() if (!userInfo) { setModalShow(true) } if (userInfo) { dispatch(postRequest()) setModalShow(false) } }, [userInfo]) return ( <div>Some JSX </div> ) } export default MainAsí que necesito tu ayuda para solucionar ese problema. ¿Podemos usar localStorage para almacenar la información, ya sea que la solicitud posterior ya se haya realizado o alguna otra idea mejor?
La mejor manera es usar el almacenamiento local, no estoy seguro si mis ubicaciones de configuración y obtención de valor del almacenamiento local están en el lugar correcto.
const Main = () => { // .... // Here I'm forcing user to login if there's user is logged in then want to make a silent post request, But it sends request everytime on state change. useEffect(() => { getLocalStorage() // Check if the value of logged is true initiali will be false until the // first request if made if (!!localStorage.getItem('logged')) { setModalShow(true) } if (userInfo) { dispatch(postRequest()) setModalShow(false) // set the value when the request is finished localStorage.setItem('logged', true) } }, [userInfo]) return ( <div>Some JSX </div> ) } export default MainHay un paquete llamado redux-persist el que puede guardar el estado, por ejemplo, en localStorage. Puede usar este paquete y enviar una solicitud post si no hay datos en el estado.
Usar localStorage para ese propósito es bastante útil, puede guardar la información en la solicitud posterior, ya sea que se haya realizado o no.
Para una configuración básica; esto podría ser así:
const postRequestStatus = localStorage.getItem('postRequestMade') ? JSON.parse(localStorage.getItem('postRequestMade')) : null useEffect(() => { getLocalStorage() if (!userInfo) { setModalShow(true) } if (userInfo) { setModalShow(false) if (!postRequestStatus) { dispatch(postRequest()) console.log('Post Request Made') localStorage.setItem('postRequestMade', true) } } }, [userInfo, postRequestStatus]) Aquí hay una trampa. En cuanto hay información en localStorage, de postRequestMade true . No se realizará la solicitud. Entonces, en algún punto del sitio, debe establecer cualquier lógica para borrarlo donde sea necesario.
En segundo lugar, ¿Qué pasa si la solicitud no tuvo éxito si hubo un error del servidor? Entonces, también debe considerar el manejo de errores. Como mencionó, está usando redux y estoy seguro de que Axios también probaría la funcionalidad de esa manera:
useEffect(() => { getLocalStorage() if (!userInfo) { setModalShow(true) } if (userInfo) { setModalShow(false) if (!postRequestStatus) { dispatch(postRequest()) // That block will take care if request was successful // After a successful request postRequestMade should be set to true. if (success) { console.log('Successful Request') localStorage.setItem('postRequestMade', true) } } } }, [userInfo, postRequestStatus, success])