使用React.memo包装组件时报错：导入的组件不是函数，求解决

你报错的核心原因是错误调用了React.memo包装后的组件：

• 直接导出普通函数组件PokemonBriefCard时，它本身是可直接调用的函数，所以PokemonBriefCard({...props})的写法能正常返回React元素。
• 但React.memo返回的是一个React高阶组件（HOC），它本质是组件类型，必须用JSX标签方式渲染，不能像普通函数那样直接调用。

修正后的组件使用代码 #

将直接调用函数的写法改为JSX标签形式：

<div className="card-brief-container">
  {
    pokemonList.map((pokemon, index) => 
    <div key={index}>
      <PokemonBriefCard
        {...pokemon}
        action={pokemon.favourite ? removeFav : addFav}
      />
    </div>
    )
  }
</div>

补充说明 #

你使用React.memo的方式本身是正确的（export default memo(PokemonBriefCard)没问题），它的作用是通过浅比较优化组件渲染，避免不必要的重渲染。只要把组件调用方式改成标准JSX格式，就能解决这个报错。

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