组件定义在功能组件中缺少显示名称答案

【问题标题】：Component definition is missing display name in functional component组件定义在功能组件中缺少显示名称
【发布时间】：2022-06-17 00:10:00
【问题描述】：

使用地图渲染我有一个返回组件的双箭头函数，我得到一个缺少显示名称的错误

这里是代码

const Sales = (props: Props) => {
  const renderCard = React.useMemo(
    () => (config) => (card, i) => {
      return (
        <div {...config} key={i}>
          <Card Icon={card.Icon} label={card.label} />
        </div>
      );
    },
    [cards]
  );

  return (
    <div title="Sales">
      <div>
        {cards.slice(0, 3).map(renderCard(configOne))}
      </div>
      {/* other stuff */}
      <div>
        {cards.slice(3).map(renderCard(configTwo))}
      </div>
    </div>
  );
};

【问题讨论】：

标签： javascript reactjs react-functional-component

【解决方案1】：

我找到了解决方案，我可以将最后一个函数从箭头转换为这样的命名函数

const renderCard = React.useMemo(
  () => (config) =>
    function ICard(card, i) {
      return (
        <div {...config} key={i}>
          <Card Icon={card.Icon} label={card.label} />
        </div>
      );
    },
  [cards]
);

我希望这对其他人也有帮助

【讨论】：