使用reactjs显示不同的bandi项目ID

编程问答 2022-06-12

问题描述

对于背景，我将ReactJS，GatsbyJS和Strapi CMS用作后端。

我有一个称为项目的内容类型。

我的问题是，我无法弄清楚如何在引导程序的一列（例如col-md-6）中仅显示一个唯一的项目，而无需重复两次内容。

我尝试使用map函数，该函数只是在重复自身。

预期结果 screenshot of expected outcome

感谢您的帮助！

../ pages / 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
      }
    }
  }
`

../ components / portfolio / portfolioMain.js 

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

../ components / portfolio / project.js 

import React from 'react'
import PropTypes from 'prop-types'
import {
    Container,CardHeader,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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

graphqljavascriptreactjsreactjsstrapi