es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mejores prácticas para establecer el estado desde una solicitud de axios.

31 Jul, 2023 Programación

Tengo un archivo api.js con la siguiente función:

export const login = (loginUserName, loginPassword, setUser) => {
    axios({
        method: 'post',
        data: {
            username: loginUserName,
            password: loginPassword
        },
        withCredentials: true,
        url: '...........'
    }).then(async (res) => {
        if (res.data.loggedIn === true) setUser(loginUserName);
    });
};

Mis hooks useState se ven de la siguiente manera:

const [ user, setUser ] = useState({});

Me preguntaba, en lugar de enviar la función setUser desde mi componente Login como lo hago:

login(userName,password,setUser);

que está en otro archivo, ¿cómo puedo hacerlo desde fuera de la función de la siguiente manera?

setUser(login(userName,password));

De modo que, en caso de que la función haya obtenido la información que deseaba, la devuelva (en este caso, el nombre de usuario) y, en caso contrario, establezca el usuario como indefinido o algo así.

Intenté utilizar:

export const login = (loginUserName, loginPassword) => {
    axios({
        method: 'post',
        data: {
            username: loginUserName,
            password: loginPassword
        },
        withCredentials: true,
        url: '............'
    }).then(async (res) => {
        if (res.data.loggedIn === true) return loginUserName;
    });
};

Pero tuve problemas con la función asíncrona. Parece que no devuelve esa información por alguna razón. Si tuviera que adivinar, la devuelve solo para la función axios o algo así. ¿Cómo puedo lograr el efecto que busco y cuál es la mejor práctica? ¿Se considera una buena práctica enviar la función “setUser” o sería mejor intentar deshacerme de ella?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el efecto deseado de devolver el nombre de usuario obtenido de la función de inicio de sesión y establecerlo como estado de usuario fuera de la función, puedes hacer uso de async/await y devolver la respuesta de la llamada con axios de la siguiente manera:

    export const login = async (loginUserName, loginPassword) => {
    try {
        const response = await axios({
            method: 'post',
            data: {
                username: loginUserName,
                password: loginPassword
            },
            withCredentials: true,
            url: '............'
        });

        if (response.data.loggedIn === true) {
            return response.data.username;
        }
        return undefined;
    } catch (error) {
        console.log(error);
    }
};

    De esta manera, la función devuelve el nombre de usuario obtenido y lo establece como estado de usuario fuera de la función de la siguiente manera:

    const handleLogin = async () => {
    const username = await login(userName, password);
    setUser(username);
};

    Enviar la función setUser como una prop en el componente de inicio de sesión se considera una buena práctica, ya que es importante mantener la lógica de modificación del estado del componente padre en el componente padre mismo. Sin embargo, el uso de async/await y devolver los datos desde la función también puede ser una buena práctica, ya que ayuda a mantener el código más organizado y modular.

Comments are closed.