0
103
Views¿Hay alguna manera de poner ganchos de reacción en una función que no sea un componente de función?
Estoy tratando de crear una función que no sea un componente ni ganchos a los que se pueda llamar en un evento específico. Digamos que tengo una función simple que publica datos usando axios y quiero usar navegar después de que la publicación sea exitosa. Aquí está el ejemplo
export const authLogin = (email, password) => { const config = { withCredentials: true, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRFToken': Cookies.get('csrftoken') } } let navigate = useNavigate(); return dispatch => { console.log('Masuk ke dalam auth file'); dispatch(authStart()); axios.post('/log_in/', { email: email, password: password }, config) .then(res => { if (res.data.error) { alert(res.data.error) dispatch(authFail(res.data.error)) } else { const token = res.data.key; const expirationDate = new Date(new Date().getTime() + 3600 * 1000); localStorage.setItem('token', token); localStorage.setItem('expirationDate', expirationDate); dispatch(authSuccess(token)); dispatch(checkAuthTimeout(3600)); alert('login berhasil') navigate("/", { replace: true }); } }) .catch(err => { alert(err); dispatch(authFail(err)) }) } } tengo un error que dice 
pero cuando trato de cambiar el nombre de la función con una letra mayúscula, ocurrió otro problema, ¿cómo resuelvo este problema? 
1 answers
Answer question0
Se debe conectar un gancho a una fibra que esté conectada directamente al árbol de componentes de React. NO PUEDE usar enlaces fuera del árbol de componentes porque React no puede realizar un seguimiento de ellos (es por eso que los enlaces siempre deben ejecutarse en el mismo orden y no pueden ser condicionales, porque React realiza un seguimiento de su estado internamente).
La única vez que puede usar un gancho fuera de un componente es desde otro gancho.
En resumen, debe poder dibujar una línea recta desde la llamada de enlace hasta React que representa el árbol de componentes. Si no puede, entonces es una llamada de enlace inválida.
LA SOLUCIÓN
... en su caso, es simplemente pasar la función de navigate a su acción como parámetro:
const MyComponent = () => { const navigate = useNavigate(); const doSomethingHandler = () => { dispatch(authLogin(email,password,navigate)) } } const authLogin = (email,password,navigate) => { // ...do your action and call the `navigate` parameter // when you need to }