reactjs 在对象数组中呈现react图标的问题

zbdgwd5y  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(127)

嗨，我试图在一个对象数组中呈现我的图标，每个对象都有一个从react-icons定义的图标
我试过将它设置为，尝试导入createElement和cloneElement并使用它们来创建Icon，并将其定义为{icon}或{benefits.icon}，但都不起作用。
错误：

Console was cleared
index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Benefits.section.jsx:84.
console.<computed> @ index.js:1
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
jsxWithValidation @ react-jsx-dev-runtime.development.js:1244
parcelHotUpdate.5iGAk @ Benefits.section.jsx:84
newRequire @ index.b4b6dfad.js:71
hmrAccept @ runtime-05ef790fbc74e1fa.js:588
ws.onmessage @ runtime-05ef790fbc74e1fa.js:162
index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Benefits.section.jsx:90.
console.<computed> @ index.js:1
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
jsxWithValidation @ react-jsx-dev-runtime.development.js:1244
parcelHotUpdate.5iGAk @ Benefits.section.jsx:90
newRequire @ index.b4b6dfad.js:71
hmrAccept @ runtime-05ef790fbc74e1fa.js:588
ws.onmessage @ runtime-05ef790fbc74e1fa.js:162
index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Benefits.section.jsx:96.
console.<computed> @ index.js:1
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
jsxWithValidation @ react-jsx-dev-runtime.development.js:1244
parcelHotUpdate.5iGAk @ Benefits.section.jsx:96
newRequire @ index.b4b6dfad.js:71
hmrAccept @ runtime-05ef790fbc74e1fa.js:588
ws.onmessage @ runtime-05ef790fbc74e1fa.js:162
3react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at reconcileSingleElement (react-dom.development.js:15750:23)
    at reconcileChildFibers (react-dom.development.js:15808:35)
    at reconcileChildren (react-dom.development.js:19167:28)
    at updateHostComponent (react-dom.development.js:19924:3)
    at beginWork (react-dom.development.js:21618:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performSyncWorkOnRoot (react-dom.development.js:26085:20)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at flushSync (react-dom.development.js:26201:7)
    at Object.scheduleRoot (react-dom.development.js:27810:5)
    at react-refresh-runtime.development.js:280:17
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:259:25)
    at helpers.js:36:11
    at helpers.js:22:14
    at helpers.js:90:9
    at runtime-05ef790fbc74e1fa.js:594:32
    at Array.forEach (<anonymous>)
    at hmrAccept (runtime-05ef790fbc74e1fa.js:593:33)
    at ws.onmessage (runtime-05ef790fbc74e1fa.js:162:13)
createFiberFromTypeAndProps @ react-dom.development.js:28439
createFiberFromElement @ react-dom.development.js:28465
reconcileSingleElement @ react-dom.development.js:15750
reconcileChildFibers @ react-dom.development.js:15808
reconcileChildren @ react-dom.development.js:19167
updateHostComponent @ react-dom.development.js:19924
beginWork @ react-dom.development.js:21618
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
scheduleRoot @ react-dom.development.js:27810
(anonymous) @ react-refresh-runtime.development.js:280
performReactRefresh @ react-refresh-runtime.development.js:259
(anonymous) @ helpers.js:36
(anonymous) @ helpers.js:22
(anonymous) @ helpers.js:90
(anonymous) @ runtime-05ef790fbc74e1fa.js:594
hmrAccept @ runtime-05ef790fbc74e1fa.js:593
ws.onmessage @ runtime-05ef790fbc74e1fa.js:162
3react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at reconcileSingleElement (react-dom.development.js:15750:23)
    at reconcileChildFibers (react-dom.development.js:15808:35)
    at reconcileChildren (react-dom.development.js:19167:28)
    at updateHostComponent (react-dom.development.js:19924:3)
    at beginWork (react-dom.development.js:21618:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performSyncWorkOnRoot (react-dom.development.js:26096:20)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at flushSync (react-dom.development.js:26201:7)
    at Object.scheduleRoot (react-dom.development.js:27810:5)
    at react-refresh-runtime.development.js:280:17
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:259:25)
    at helpers.js:36:11
    at helpers.js:22:14
    at helpers.js:90:9
    at runtime-05ef790fbc74e1fa.js:594:32
    at Array.forEach (<anonymous>)
    at hmrAccept (runtime-05ef790fbc74e1fa.js:593:33)
    at ws.onmessage (runtime-05ef790fbc74e1fa.js:162:13)
createFiberFromTypeAndProps @ react-dom.development.js:28439
createFiberFromElement @ react-dom.development.js:28465
reconcileSingleElement @ react-dom.development.js:15750
reconcileChildFibers @ react-dom.development.js:15808
reconcileChildren @ react-dom.development.js:19167
updateHostComponent @ react-dom.development.js:19924
beginWork @ react-dom.development.js:21618
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
scheduleRoot @ react-dom.development.js:27810
(anonymous) @ react-refresh-runtime.development.js:280
performReactRefresh @ react-refresh-runtime.development.js:259
(anonymous) @ helpers.js:36
(anonymous) @ helpers.js:22
(anonymous) @ helpers.js:90
(anonymous) @ runtime-05ef790fbc74e1fa.js:594
hmrAccept @ runtime-05ef790fbc74e1fa.js:593
ws.onmessage @ runtime-05ef790fbc74e1fa.js:162
3index.js:1 The above error occurred in the <div> component:

    at div
    at O (http://localhost:1234/index.b4b6dfad.js:27778:10)
    at div
    at O (http://localhost:1234/index.b4b6dfad.js:27778:10)
    at div
    at VisualElementHandler (http://localhost:1234/index.b4b6dfad.js:29582:1)
    at MotionComponent (http://localhost:1234/index.b4b6dfad.js:29186:38)
    at div
    at O (http://localhost:1234/index.b4b6dfad.js:27778:10)
    at div
    at O (http://localhost:1234/index.b4b6dfad.js:27778:10)
    at section
    at O (http://localhost:1234/index.b4b6dfad.js:27778:10)
    at Benefits (/__parcel_hmr/3dbfaaaade9fea51:228:68)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
scheduleRoot @ react-dom.development.js:27810
(anonymous) @ react-refresh-runtime.development.js:280
performReactRefresh @ react-refresh-runtime.development.js:259
(anonymous) @ helpers.js:36
(anonymous) @ helpers.js:22
(anonymous) @ helpers.js:90
(anonymous) @ runtime-05ef790fbc74e1fa.js:594
hmrAccept @ runtime-05ef790fbc74e1fa.js:593
ws.onmessage @ runtime-05ef790fbc74e1fa.js:162
react-dom.development.js:28439 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
    at createFiberFromElement (react-dom.development.js:28465:15)
    at reconcileSingleElement (react-dom.development.js:15750:23)
    at reconcileChildFibers (react-dom.development.js:15808:35)
    at reconcileChildren (react-dom.development.js:19167:28)
    at updateHostComponent (react-dom.development.js:19924:3)
    at beginWork (react-dom.development.js:21618:14)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performSyncWorkOnRoot (react-dom.development.js:26096:20)
    at flushSyncCallbacks (react-dom.development.js:12042:22)
    at flushSync (react-dom.development.js:26201:7)
    at Object.scheduleRoot (react-dom.development.js:27810:5)
    at react-refresh-runtime.development.js:280:17
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:259:25)
    at helpers.js:36:11
    at helpers.js:22:14
    at helpers.js:90:9
    at runtime-05ef790fbc74e1fa.js:594:32
    at Array.forEach (<anonymous>)
    at hmrAccept (runtime-05ef790fbc74e1fa.js:593:33)
    at ws.onmessage (runtime-05ef790fbc74e1fa.js:162:13)

代码：

import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

// import {IoBugSharp} from 'react-icons/io5';

import { TbTargetArrow, TbThumbUpFilled, TbReportMoney } from 'react-icons/ti';
import { FaCogs } from 'react-icons/fa';
import { BsHourglassSplit, BsShieldFillCheck } from 'react-icons/bs';
import { GiHealthNormal } from 'react-icons/gi';
import { IoMdAnalytics } from 'react-icons/io';

const BenefitsContainer = styled.section`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;
`;

const BenefitsHeader = styled.h2`
  font-size: 40.9pt;
  margin-bottom: 2rem;
`;

const BenefitsColumns = styled.div`
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
`;

const LeftColumn = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 50%;
`;

const RightColumn = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 50%;
`;

const BenefitItem = styled.div`
  display: flex;
  align-items: center;
  width: 50%;
  padding: 1rem 0;
`;

const BenefitIconContainer = styled.div`
  background-color: #07f3bd;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 4.5rem;
    height: 4.5rem;
  }
`;

const BenefitTextContainer = styled.div`
  padding-left: 10px;
`;

const BenefitTitle = styled.h4`
  font-weight: bold;
  margin-bottom: 0.5rem;
`;

const BenefitDescription = styled.p`
  margin: 0;
`;

const benefitsData = [
  {
    title: 'Accuracy',
    icon: <TbTargetArrow />,
    description:
      'The platform averages 99.92% alignment with physical counts and on investigation of differences proved to be more accurate than manual counts.',
  },
  {
    title: 'Animal Welfare',
    icon: <TbThumbUpFilled />,
    description:
      'The animals are not aware that they are being counted and therefore there is no chance of stress, injury or physical inconvenience.',
  },
  {
    title: 'Financing & Insurance',
    icon: <TbReportMoney />,
    description: 'Use independent verification to secure or negotiate better terms for  financing and insurance.',
  },
  {
    title: 'Integration',
    icon: <FaCogs />,
    description: 'Easily integrate results into existing systems and processes such as food allocation',
  },
  {
    title: 'Cost and Time Efficient',
    icon: <BsHourglassSplit />,
    description:
      'Using AI and drones is more cost and time efficient and less disruptive to operations than manual verification.',
  },
  {
    title: 'Health Benefits',
    icon: <GiHealthNormal />,
    description:
      'Human foot traffic is reduced in camps, potentially reducing the spread of diseases such as foot and mouth.',
  },
  {
    title: 'Audit',
    icon: <BsShieldFillCheck />,
    description:
      'Independent photographic and geo-located evidence is available on a web platform to assist audits with the interrogation and substantiation of assets.',
  },
  {
    title: 'Advanced Analytics and Continuous Development',
    icon: <IoMdAnalytics />,
    description:
      'Total herd value estimate and behavioral model used to identify abnormal behavior (e.g. clustering around water or feeding trough). ',
  },
];

const benefitItemVariants = {
  hidden: { opacity: 0, x: -50 },
  visible: { opacity: 1, x: 0, transition: { duration: 0.5 } },
};

const BenefitItems = (title, icon, description, inView) => {
  return (
    <motion.div variants={benefitItemVariants} initial="hidden" animate={inView ? 'visible' : 'hidden'}>
      <BenefitItem>
        <BenefitIconContainer>{icon}</BenefitIconContainer>
        <BenefitTextContainer>
          <BenefitTitle>{title}</BenefitTitle>
          <BenefitDescription>{description}</BenefitDescription>
        </BenefitTextContainer>
      </BenefitItem>
    </motion.div>
  );
};

const Benefits = () => {
  const [ref, inView] = useInView({
    threshold: 0.1,
    triggerOnce: true,
  });

  const leftBenefits = benefitsData.slice(0, 4);
  const rightBenefits = benefitsData.slice(4);

  return (
    <BenefitsContainer ref={ref}>
      <BenefitsHeader>Benefits</BenefitsHeader>
      <BenefitsColumns>
        <LeftColumn>
          {leftBenefits.map((benefit) => {
            const { title, icon, description } = benefit;
            return BenefitItems(title, icon, description, inView);
          })}
        </LeftColumn>
        <RightColumn>
          {rightBenefits.map((benefit, index) => {
            const { title, icon, description } = benefit;
            return BenefitItems(title, icon, description, inView);
          })}
        </RightColumn>
      </BenefitsColumns>
    </BenefitsContainer>
  );
};

export default Benefits;

有人能帮帮我吗？我厌倦了尝试各种可能的方法，我想我错过了一些东西。
先谢了
编辑***
按照建议更新了代码，但仍然得到一个带有相同控制台错误的白色页

const BenefitItems = ({ data }) => {
  return data.map((item) => {
    console.log('item.icon: ', item.icon);
    return (
      <BenefitItem key={item.title}>
        <BenefitIconContainer>
          <item.icon />
        </BenefitIconContainer>
        <BenefitTextContainer>
          <BenefitTitle>{item.title}</BenefitTitle>
          <BenefitDescription>{item.description}</BenefitDescription>
        </BenefitTextContainer>
      </BenefitItem>
    );
  });
};

const Benefits = () => {
  const [ref, inView] = useInView({
    threshold: 0.1,
    triggerOnce: true,
  });

  const leftBenefits = benefitsData.slice(0, 4);
  const rightBenefits = benefitsData.slice(4);

  return (
    <BenefitsContainer ref={ref}>
      <BenefitsHeader>Benefits</BenefitsHeader>
      <BenefitsColumns>
        <LeftColumn>
          <motion.div variants={benefitItemVariants} initial="hidden" animate={inView ? 'visible' : 'hidden'}>
            <BenefitItems data={leftBenefits} />
          </motion.div>
        </LeftColumn>
        <RightColumn>
          <motion.div variants={benefitItemVariants} initial="hidden" animate={inView ? 'visible' : 'hidden'}>
            <BenefitItems data={rightBenefits} />
          </motion.div>
        </RightColumn>
      </BenefitsColumns>
    </BenefitsContainer>
  );
};
reactjs

1条答案

按热度按时间
epggiuax

epggiuax1#

您将JSX元素作为函数组件调用，反之亦然。

备选案文1：

{
title: 'Animal Welfare',
icon: TbThumbUpFilled,
}

备选案文2：

{
title: 'Animal Welfare',
icon: (props) => <TbThumbUpFilled {...props} />,
}

那就这么做：

<icon />

// or if you're looping:
{benefitsData.map((item) => (
    ...
    <item.icon className="..." />
    ...
))}
赞(0）分享  回复(0）举报  2023-03-22
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com