此表达式不可调用。类型'{店铺：typeof店铺； }' 没有调用签名。反应

Question

我不知道我是如何以及为什么在 React 中收到此错误的。

我正在尝试构建这个组件：

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

但程序不会编译并给出以下消息：

此表达式不可调用。类型'{店铺：typeof店铺； }' 拥有 没有来电签名

Shop通过以下方式导入 import Shop from '../Shop';

文件夹../Shop 具有以下结构：

Shop/
       Shop.tsx
       index.tsx

而index.tsx 有这样的内容：

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

Shop 是这样定义的，其中有一个构造函数：

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;

我做错了什么？我已经尝试在 SO 上查找该消息并找到 this 帖子，但对我来说似乎没有犯同样的错误。

编辑： 我也按照@Viet 的建议进行了尝试：

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

仍然得到错误：

JSX 元素类型“Shop”没有任何构造或调用 签名。 TS2604

Answer 1

因为Shop 是组件，所以你应该将它与<> 一起使用：

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

问题是你以错误的方式导入Shop。只需在使用 Shop 组件的组件中更新 import，如下所示：

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

或者像这样

import Shop from "../Shop/Shop" // from Shop file