React.memo()给了我错误(0,_components_logentName_js__WEBPACK_IMPORTED_MODULE_3__.default)不是函数

fruv7luv  于 11个月前  发布在  Webpack
关注(0)|答案(1)|浏览(95)

示例代码如下:

import Button from '@mui/material/Button';
import { memo } from 'react';

function PokemonBriefCard(props) {

  return (
    <div>Some random component</div>
  );
}

export default memo(PokemonBriefCard);
// export default PokemonBriefCard;

字符串
该组件的用法如下:

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


看起来如果我把memo放到组件中,它会抛出这样的错误:


的数据
一旦我删除了memo(就像使用export default PokemonBriefCard一样),项目就不会出现任何问题。
我是不是用错了React.memo?我看了介绍文档,但找不到原因。

vlurs2pr

vlurs2pr1#

React.memo用于组件。如果PokemonBriefCard是组件,则不应将其作为函数调用

PokemonBriefCard({   // this is wrong
     ...pokemon,
     action: pokemon.favourite ? removeFav : addFav
 })

字符串
您应该将其用作组件:<PokemonBriefCard ... />
如果它只是一个render函数PokemonBriefCard(...)(最好将名称改为camel case),那么你不能使用React.memo,因为它只在组件上使用。
注意:React.memo不返回函数,这就是为什么错误告诉你它不是函数

相关问题