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

发布于 2025-02-08 03:59:10 字数 679 浏览 2 评论 0原文

呈现地图我有一个双箭头函数返回组件，我遇到了一个缺少的显示名称错误，

这是代码

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

原文

Rendering with map I have a double arrow function returning components and I get a missing display name error

Here is the code

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赴月观长安 2025-02-15 03:59:10

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

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

我希望这也可以帮助别人

I found the solution, I can convert the last function from an arrow to a named function like this

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

I hope this helps someone else too

回复收藏 0 原文

~没有更多了~