Question

我正在尝试从无头 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`.

我可以将我的地图函数用作纯 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} />    })

在调试时，我尝试简化我的组件，将我的 PartnerLooper 重写为

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

使用这种方法，我可以将 PartnerLooper 作为 javascript 函数而不是作为反应组件调用

return(
          {/* Returns errror */}
         <PartnerLooper />
         {/* Works  */}
         {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;

在这里查看我正在使用的数据结构 https://pastebin.com/MFGh1xuY

编辑：我正在运行 "gatsby": "^2.22.15" 和“反应”："^16.12.0",

Answer 1

您将一组元素分配给 PartnerLooper，然后将其用作 <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>

如果您打算为每个合作伙伴渲染一个 Row，<您可以这样实现：

return (
  <div className="container pt-8 pt-md-10 partnerPadding" role="region">
    <section aria-label="Partners">
      {partners.map(partner =>
        <Row className="justify-content-md-center" key={partner._key}>
          <SinglePartner partner={partner} /> 
        </Row>
      )}
    </section>
  </div>
)

Answer 2

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

我不想直接在 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;

元素类型无效

2 个答案: