• 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

225
Vistas
Esta expresión no es invocable. Escriba '{ Tienda: tipo de Tienda; }' no tiene firmas de llamada. Reaccionar

No sé cómo y por qué recibo este error en React.

Estoy tratando de construir estos componentes:

 render() { return ( <div> <div>ShopsList</div> {this.state.loading || !this.state.shops ? ( <div></div> ) : ( <div> {this.state.shops.map(shop=>Shop(shop))} # Line with the error </div> ) } </div> ) }

pero el programa no compila y da el siguiente mensaje:

Esta expresión no es invocable. Escriba '{ Tienda: tipo de Tienda; }' no tiene firmas de llamada

La Shop se importa de la siguiente manera import Shop from '../Shop';

con la carpeta ../Shop teniendo la siguiente estructura:

 Shop/ Shop.tsx index.tsx

e index.tsx tiene este contenido:

 import Shop from "./Shop"; export default {Shop}

La tienda se ha definido de esta manera, que tiene un constructor:

 import React from 'react'; export interface IShopProps { id: number; name: string; phone_number?: string; } class Shop extends React.Component<IShopProps, {}> { constructor(props: IShopProps) { super(props); } render() { return ( <div className='shopRow'> <div className='shopName'>{this.props.name}</div> <div className='shopNumber'>{this.props.phone_number ? this.props.phone_number : "numero non disponibile"}</div> </div> ) } }; export default Shop;

¿Qué estoy haciendo mal? Ya intenté buscar ese mensaje en SO y encontré esta publicación, pero no me parece que haya cometido el mismo error.

Editar: también probé según lo sugerido por @Viet:

 {this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}

y sigue saliendo el error:

El tipo de elemento JSX 'Tienda' no tiene ninguna construcción ni firma de llamada. TS2604

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Debido a que Shop es el componente, debe usarlo con <> :

 {this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}

El problema es que importas Shop manera incorrecta. Simplemente actualice la import en su componente donde usa el componente Shop de esta manera:

 import { Shop } from "../Shop" // from index file

O así

 import Shop from "../Shop/Shop" // from Shop file
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