Javascript 使用reactjs显示不同的strapi项目ID

作为背景，我使用ReactJS、GatsbyJS以及Strapi CMS作为后端

我有一种叫做项目的内容类型

我的问题是，我不知道如何在bootstrap（例如：col-md-6）的一列中只显示一个唯一的项目，而不重复两次内容

我尝试过使用map函数，它只是在重复自己

预期结果

谢谢你的帮助

。/page/portfolio.js

import React from 'react';

import Layout from '../components/Layout'
import NavAbout from '../components/about/navAbout'
import PortfolioMain from '../components/portfolio/portfolioMain'
import ServicesCTA from '../components/services/servicesCTA'
import Footer from '../components/Footer'
import { graphql } from 'gatsby'


export default function Portfolio( {data:{allStrapiProjects:{nodes:projects}}} ) {



  return(
    <Layout>
      <NavAbout />
      <PortfolioMain projects={projects}/>
      <ServicesCTA />
      <Footer />
    </Layout>
  )

  
}



export const query = graphql`
  {
    allStrapiProjects {
      nodes {
        id
        avatar {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        category
        date(formatString: "MM-DD")
        desc
        mockup {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
        website
        strapiId
      }
    }
  }
`

import React from 'react'

import {
    Container,
    Row,
    Col,
    Button,
    Badge,
    Card,
    CardBody,
    CardHeader
} from 'reactstrap'



import PortfolioModal1 from '../../assets/js/PortfolioModal1'

import {   graphql } from 'gatsby'
import { render } from 'react-dom'
import Project from '../portfolio/project'






const PortfolioMain = ( {projects}) => {

    return <section className="section projects-3 mt-5">
        <Container>
            <Row>
                <Col className="mr-auto ml-auto text-center col-md-8">
                    <h6 className="category text-muted">
                        My Work
                    </h6>
                    <h2 className="title mb-5">
                        Some of my recent projects
                    </h2>
                </Col>
            </Row>
        
            <Row>
                <Col className="mx-auto col-md-6">
                   <h3>Project One Here</h3>
                </Col>
                <Col className="mx-auto col-md-6 text-center">
                    {projects.map((project, index) => {
                        return <Project key={project.id} index={index} {...project} />
                    })}
       
                </Col>
            </Row>
            
        
         
        
        </Container>
        


    </section>
}

export default PortfolioMain

import React from 'react'
import PropTypes from 'prop-types'
import {
    Container,
    Row,
    Col,
    Card,
    CardHeader,
    CardBody,
    Button
} from 'reactstrap'

import Image from 'gatsby-image'

import PortfolioModal1 from '../../assets/js/PortfolioModal1'

const Project = ( {category, date, desc, title, website, index, avatar, mockup}) => {
    return <div>
        <h3>{title}</h3>
        
    </div>

        
    
}

export default Project

从“React”导入React；
从“../components/Layout”导入布局
从“../components/about/NavAbout”导入NavAbout
从“../components/PortfolioMain/PortfolioMain”导入PortfolioMain
从“../components/services/ServicesCTA”导入ServicesCTA
从“../components/Footer”导入页脚
从“盖茨比”导入{graphql}
导出默认函数组合（{data:{allStrapiProjects:{nodes:projects}}}）{
返回(
)
}
export const query=graphql`
{
所有StrapipProjects{
节点{
身份证件
化身{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
类别
日期（格式字符串：“MM-DD”）
描述
模型{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
标题
网站
斯特拉皮德
}
}
}
`

。/components/portfolio/portfolioMain.js

import React from 'react';

import Layout from '../components/Layout'
import NavAbout from '../components/about/navAbout'
import PortfolioMain from '../components/portfolio/portfolioMain'
import ServicesCTA from '../components/services/servicesCTA'
import Footer from '../components/Footer'
import { graphql } from 'gatsby'


export default function Portfolio( {data:{allStrapiProjects:{nodes:projects}}} ) {



  return(
    <Layout>
      <NavAbout />
      <PortfolioMain projects={projects}/>
      <ServicesCTA />
      <Footer />
    </Layout>
  )

  
}



export const query = graphql`
  {
    allStrapiProjects {
      nodes {
        id
        avatar {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        category
        date(formatString: "MM-DD")
        desc
        mockup {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
        website
        strapiId
      }
    }
  }
`

import React from 'react'

import {
    Container,
    Row,
    Col,
    Button,
    Badge,
    Card,
    CardBody,
    CardHeader
} from 'reactstrap'



import PortfolioModal1 from '../../assets/js/PortfolioModal1'

import {   graphql } from 'gatsby'
import { render } from 'react-dom'
import Project from '../portfolio/project'






const PortfolioMain = ( {projects}) => {

    return <section className="section projects-3 mt-5">
        <Container>
            <Row>
                <Col className="mr-auto ml-auto text-center col-md-8">
                    <h6 className="category text-muted">
                        My Work
                    </h6>
                    <h2 className="title mb-5">
                        Some of my recent projects
                    </h2>
                </Col>
            </Row>
        
            <Row>
                <Col className="mx-auto col-md-6">
                   <h3>Project One Here</h3>
                </Col>
                <Col className="mx-auto col-md-6 text-center">
                    {projects.map((project, index) => {
                        return <Project key={project.id} index={index} {...project} />
                    })}
       
                </Col>
            </Row>
            
        
         
        
        </Container>
        


    </section>
}

export default PortfolioMain

import React from 'react'
import PropTypes from 'prop-types'
import {
    Container,
    Row,
    Col,
    Card,
    CardHeader,
    CardBody,
    Button
} from 'reactstrap'

import Image from 'gatsby-image'

import PortfolioModal1 from '../../assets/js/PortfolioModal1'

const Project = ( {category, date, desc, title, website, index, avatar, mockup}) => {
    return <div>
        <h3>{title}</h3>
        
    </div>

        
    
}

export default Project

从“React”导入React
进口{
集装箱，
一行
上校，
按钮
徽章，
卡片
名片夹，
万向节头
}从“反应带”
从“../../assets/js/PortfolioModal1”导入PortfolioModal1
从“盖茨比”导入{graphql}
从'react dom'导入{render}
从“../portfolio/Project”导入项目
const PortfolioMain=（{projects}）=>{
返回
我的作品
我最近的一些项目
在这里投影一个
{projects.map（（项目，索引）=>{
返回
})}
}
导出默认PortfolioMain

。/components/portfolio/project.js

import React from 'react';

import Layout from '../components/Layout'
import NavAbout from '../components/about/navAbout'
import PortfolioMain from '../components/portfolio/portfolioMain'
import ServicesCTA from '../components/services/servicesCTA'
import Footer from '../components/Footer'
import { graphql } from 'gatsby'


export default function Portfolio( {data:{allStrapiProjects:{nodes:projects}}} ) {



  return(
    <Layout>
      <NavAbout />
      <PortfolioMain projects={projects}/>
      <ServicesCTA />
      <Footer />
    </Layout>
  )

  
}



export const query = graphql`
  {
    allStrapiProjects {
      nodes {
        id
        avatar {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        category
        date(formatString: "MM-DD")
        desc
        mockup {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        title
        website
        strapiId
      }
    }
  }
`

import React from 'react'

import {
    Container,
    Row,
    Col,
    Button,
    Badge,
    Card,
    CardBody,
    CardHeader
} from 'reactstrap'



import PortfolioModal1 from '../../assets/js/PortfolioModal1'

import {   graphql } from 'gatsby'
import { render } from 'react-dom'
import Project from '../portfolio/project'






const PortfolioMain = ( {projects}) => {

    return <section className="section projects-3 mt-5">
        <Container>
            <Row>
                <Col className="mr-auto ml-auto text-center col-md-8">
                    <h6 className="category text-muted">
                        My Work
                    </h6>
                    <h2 className="title mb-5">
                        Some of my recent projects
                    </h2>
                </Col>
            </Row>
        
            <Row>
                <Col className="mx-auto col-md-6">
                   <h3>Project One Here</h3>
                </Col>
                <Col className="mx-auto col-md-6 text-center">
                    {projects.map((project, index) => {
                        return <Project key={project.id} index={index} {...project} />
                    })}
       
                </Col>
            </Row>
            
        
         
        
        </Container>
        


    </section>
}

export default PortfolioMain

import React from 'react'
import PropTypes from 'prop-types'
import {
    Container,
    Row,
    Col,
    Card,
    CardHeader,
    CardBody,
    Button
} from 'reactstrap'

import Image from 'gatsby-image'

import PortfolioModal1 from '../../assets/js/PortfolioModal1'

const Project = ( {category, date, desc, title, website, index, avatar, mockup}) => {
    return <div>
        <h3>{title}</h3>
        
    </div>

        
    
}

export default Project

从“React”导入React
从“道具类型”导入道具类型
进口{
集装箱，
一行
上校，
卡片
万向节，
名片夹，
按钮
}从“反应带”
从“盖茨比图像”导入图像
从“../../assets/js/PortfolioModal1”导入PortfolioModal1
const项目=（{类别、日期、描述、标题、网站、索引、化身、模型}）=>{
返回
{title}
}
导出默认项目

第二个值集渲染两次？请尝试

return

Hi，谢谢您的评论，但我想知道如何准确提取项目id，并根据上面的图片，仅在一列中显示该项目，在下一列中显示下一个不同的项目。左列显示项目1的项目id，右列显示项目2的id。如果这有意义的话。尝试的结果？每个项目都通过了哪些道具？签入react浏览器工具或console.log