Javascript 元素类型无效

我试图从一个无头CMS中循环出一些合作伙伴徽标，但每当我尝试在我的文件中使用React组件时，我都会收到一个错误声明

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Partners`.

我可以将map函数用作纯javascript函数，但当我尝试将它们用作React组件时，会出现此错误

我想干什么

  const SinglePartner = ({partner}) => {
    return (
      <Col sm="6" md="3" lg="4" className="logoScaling">
        <h4 className="text-center">{partner.title}</h4>
        <img
          src={partner.partnerLogo.asset.url}
          alt={partner.partnerLogo.alt}
          className="partnerLogos"
        />
      </Col>
    )   }

  const PartnerLooper = partners.map((partner) => {
    return <SinglePartner key={partner._key} />    })

constsinglepartner=（{partner}）=>{
返回(
{partner.title}
)   }
constpartnerlooper=partners.map（（partner）=>{
返回}）

调试时，我尝试简化组件，将PartnerLoop重新写入

  const PartnerLooper = partners.map((partner) => {
    return <p>{partner.name}</p>
  })

constpartnerlooper=partners.map（（partner）=>{
返回{partner.name}

})

使用此方法，我可以将PartnerLooper作为javascript函数调用，但不能作为react组件调用

return(
          {/* Returns errror */}
         <PartnerLooper />
         {/* Works  */}
         {PartnerLooper}
)

返回(
{/*返回error*/}
{/*作品*/}
{PartnerLooper}
)

完整组件代码：

import React from "react";
import { Col, Row } from "react-bootstrap";


const Partners = ({ partners }) => {
  
  const PartnerLooper = partners.map((partner) => {
    return <SinglePartner partner={partner} /> 
  })

  const SinglePartner = ({partner}) => {
    return (
      <Col sm="6" md="3" lg="4" className="logoScaling">
        <h4 className="text-center">{partner.title}</h4>
        <img
          src={partner.partnerLogo.asset.url}
          alt={partner.partnerLogo.alt}
          className="partnerLogos"
        />
      </Col>
    )
  }
  return (
    <div className="container pt-8 pt-md-10 partnerPadding" role="region">
      <section aria-label="Partners">
        <Row className="justify-content-md-center">
         <PartnerLooper />
        </Row>
      </section>
    </div>
  );
};

export default Partners;

从“React”导入React；
从“react bootstrap”导入{Col，Row}；
const Partners=（{Partners}）=>{
constpartnerlooper=partners.map（（partner）=>{
返回
})
const SinglePartner=（{partner}）=>{
返回(
{partner.title}
)
}
返回(
);
};
出口违约伙伴；

查看我在这里使用的数据结构

---

编辑：我正在运行

“gatsby”：“^2.22.15”

和“react”：

“^16.12.0”

您正在为

PartnerLooper

分配一个元素数组，然后将其用作

Partners

组件中的组件

。您可以直接将元素数组作为子元素插入JSX

将返回的JSX替换为

<div className="container pt-8 pt-md-10 partnerPadding" role="region">
  <section aria-label="Partners">
    <Row className="justify-content-md-center">
      {PartnerLooper} 
    </Row>
  </section>
</div>

---

谢谢你，你的回答帮助了我

我不想直接在JSX中运行map，因为我认为它有点难看，我通过将我的SinglePartner和PartnerLooper组件包装在父组件中并使用该组件的返回来解决这个问题。完整代码：

const Partners = ({ partners }) => {

  const AllPartners = () => {
    const SinglePartner = ({ partner }) => {
      return (
        <Col sm="6" md="3" lg="4" className="logoScaling">
          <h4 className="text-center">{partner.name}</h4>
          <img
            src={partner.partnerLogo.asset.url}
            alt={partner.partnerLogo.alt}
            className="partnerLogos"
          />
        </Col>
      )
    }
    const PartnerLooper = partners.map((partner) => {
      return <SinglePartner partner={partner} />
    })
    return PartnerLooper
  }


  return (
    <div className="container pt-8 pt-md-10 partnerPadding" role="region">
      <section aria-label="Partners">
        <Row className="justify-content-md-center">
          <AllPartners />
        </Row>
      </section>
    </div>
  );
};

export default Partners;

constpartners=（{Partners}）=>{
const AllPartners=（）=>{
const SinglePartner=（{partner}）=>{
返回(
{partner.name}
)
}
constpartnerlooper=partners.map（（partner）=>{
返回
})
回程活套
}
返回(
);
};
出口违约伙伴；

我在这里没有看到任何“

PartnerLogo

”。此外，您正在访问

partner.title

，而该数据只有

partner.name

请记住将

partner.title

修改为

partner.name

const Partners = ({ partners }) => {

  const AllPartners = () => {
    const SinglePartner = ({ partner }) => {
      return (
        <Col sm="6" md="3" lg="4" className="logoScaling">
          <h4 className="text-center">{partner.name}</h4>
          <img
            src={partner.partnerLogo.asset.url}
            alt={partner.partnerLogo.alt}
            className="partnerLogos"
          />
        </Col>
      )
    }
    const PartnerLooper = partners.map((partner) => {
      return <SinglePartner partner={partner} />
    })
    return PartnerLooper
  }


  return (
    <div className="container pt-8 pt-md-10 partnerPadding" role="region">
      <section aria-label="Partners">
        <Row className="justify-content-md-center">
          <AllPartners />
        </Row>
      </section>
    </div>
  );
};

export default Partners;