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
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