• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

326
Vistas
TypeError: Object(...) no es una función pero no puedo averiguar por qué no

Estoy escribiendo una pequeña aplicación de reacción y estoy tratando de obtener datos de un servidor graphql. Creo (gran énfasis en la palabra pensar) que lo estoy consultando correctamente, sin embargo, se compila pero luego me da el siguiente mensaje de error:

TypeError: Object(...) no es una función

Se refiere a la línea 16 que es donde defino la función Usuarios.

Después de buscar un poco en Google, me encontré con esto: TypeError: Object(...) no es una función reactjs Por lo que parecen señalar a la persona que no está importando/exportando allí la función correctamente. Sin embargo, no creo que lo esté haciendo mal. Cualquier ayuda o indicación en la dirección correcta sería maravillosa.

Gracias por leer y mantente a salvo :)

fragmentos de código:

Archivo de usuarios:

 import React from "react"; import { useQuery } from "react-apollo"; import { gql } from "graphql-tag"; const QUERY_ALL_USERS = gql` query getUsers { users{ name role createdAt } } `; export const Users = () => { const { loading, error, data } = useQuery(QUERY_ALL_USERS); if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; const users = data.users.map((u) => { return ( <li> {u.name} <strong>{u.role}</strong> </li> ) }) return ( <ul> { users } </ul> ); };

Aplicación.js:

 import { Users } from "./Users"; . . . class App extends Component { render() { return ( <div className="app"> <header> . . . </header> <Users /> </div> ); } }
almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Intenta importarlo así

importar gql desde 'graphql-tag';

Básicamente eliminar {} envoltura

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Creo que necesita mover la asignación a través del usuario a la declaración de devolución. O en if (data) antes de la devolución. Parece que los datos de los usuarios se leen antes de recibir la respuesta.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

import React from "react"; import { useQuery } from "react-apollo"; import { gql } from "graphql-tag"; const QUERY_ALL_USERS = gql` query getUsers { users{ name role createdAt } } `; export const Users = () => { const { loading, error, data } = useQuery(QUERY_ALL_USERS); if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; function User(){ let users if(data && data?.user){ users = = data.users.map((u) => { return ( <li> {u.name} <strong>{u.role}</strong> </li> ) }) } return users } return ( <ul> {!loading && <User/> } </ul> ); };

ver código completo

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Dijo que Object no es una función, en reaccionar, no puede usar un objeto como componente, tiene que ser una función. En lugar de hacer <ul>{ users }</ul> , intente crear una función Usuario, devuelva la matriz de mapas a través de la función

 Function User(){ let user if(data && data?.users){ users = data.users.map((u) => { return ( <li> {u.name} <strong>{u.role}</strong> </li> ) })} return user }

luego lo cambié a

 <ul><User /></ul>

déjame saber si eso funciona.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda