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.

Null no es un objeto (evaluando ‘user.foto’)

31 Jul, 2023 Programación

Estoy tratando de obtener una API con algunos datos de usuario utilizando Axios en React Native, desde un contexto que recibe esta información de la API y la pasa a otro componente que recibe el contexto y la utiliza.

Axios API

import axios from 'axios';

export const api = axios.create({
    baseURL: 'https://virtserver.swaggerhub.com/lucasstartab/euro-api/1.0.0'
})

Context API

export function AuthProvider(props) {
    const [user, setUser] = useState(null);

    async function signIn() {
        try {
            const response = await api.get('/user');
            setUser(response.data[0].userInfo);
        } catch(error) {
            console.log(error);
        }
    }

    return (
        <authcontext.provider value="{{signIn," user}}="">
            {props.children}
        </authcontext.provider>
    )
}

Componente que utiliza el contexto

export function UserInfo({ navigation }) {
    const {user} = useContext(AuthContext);

    return (
        <scrollview style="{styles.container}">
            <host>
                <view style="{styles.padding}">
                    <view style="{styles.header}">
                        <userphoto imageuri="{user.foto}" size='BIG' border="{4}/">
                        <view style="{styles.ProfileAndDesc}">
                            <text style="{styles.profile}">{user.name}</text>
                            <text style="{styles.desc}">Filial {user.filial}</text>
                        </view>
                    </userphoto></view>

No sé por qué está apareciendo este error, he verificado la URL de la API pero funciona normalmente. El error:

Error

No encuentro más formas en mi camino tratando de resolver esto, espero obtener una respuesta, ¡gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según el mensaje de error, parece que el punto final de la API /user no está devolviendo ningún dato. Esto podría ser debido a varias razones, como una implementación incorrecta de la API o una autenticación incorrecta si se requiere autenticación para acceder a los datos.

    Para diagnosticar aún más el problema, podrías intentar acceder directamente al punto final de la API (por ejemplo, a través de Postman o directamente en el navegador) para ver si devuelve algún dato. También podrías verificar la documentación de la API o contactar al proveedor de la API para obtener más ayuda.

    Además, podrías agregar un manejo de errores en el componente AuthProvider para proporcionar mensajes de error más informativos. Por ejemplo, podrías actualizar el bloque catch de la siguiente manera:

    catch(error) {
  console.log(error.response); // Registrar el objeto de respuesta de error
  setUser(null); // Establecer el usuario en null para indicar un error
}

    Esto registrará el objeto de respuesta de error, que contiene más información sobre el error como el código de estado HTTP y cualquier mensaje de error devuelto por la API.

    Finalmente, asegúrate de haber importado correctamente la instancia api en el componente AuthProvider y de que la baseURL sea correcta.

Comments are closed.