React+TS报错This expression is not callable无调用签名如何解决

你的报错核心来自Shop目录下index.tsx的导出逻辑错误，其次是初期组件调用的语法错误，具体拆分如下：

1. 导出错误：
   你在Shop/index.tsx里写的是export default {Shop}，这代表你导出的是一个{ Shop: 组件实例 }的普通对象，不是直接导出Shop组件本身。所以你用import Shop from '../Shop'导入的时候，拿到的Shop是这个包含组件的对象，不是可调用/可渲染的React组件，自然会报「没有调用签名/没有构造签名」的错误。
2. 初期调用语法错误：
   你最开始写的Shop(shop)是错误的React组件使用方式，类组件不能直接当做函数调用，需要用JSX标签语法<Shop {...props} />渲染，你后续修改了写法但因为导出问题没解决，所以还是报错。

方案1：修改index.tsx的导出逻辑（更符合目录导入的常规写法） #

把Shop/index.tsx里的代码改成：

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

修改后你原来的导入语句import Shop from '../Shop'就可以正常拿到组件，修改后的渲染代码：

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

就能正常运行。

方案2：不修改index.tsx，调整导入和使用逻辑 #

如果你不想改现有导出写法，导入后从default对象里取出Shop组件即可：

import ShopModule from '../Shop';
const { Shop } = ShopModule;

使用的时候正常写JSX标签即可：

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

内容的提问来源于stack exchange，提问作者ninazzo