javascript - 在 ReactJS 中单击特定选项卡时如何显示产品

Question

我使用了 React-Bootstrap 选项卡组件，并且我已经从后端 API 的选项卡中加载了我的类别。我有一个与类别 ID 匹配的产品列表，当我单击一个选项卡（例如水果）时，水果里面的产品（苹果，橙色应该被渲染..我怎么能得到这个我 试图得到的输出是图像在这里

我曾尝试将单击的类别 ID 作为道具传递给另一个组件，但我仍然无法得到这个

TabCategory.js

import {React, useState, useEffect} from 'react'
import TabContent1 from './TabContent'
import Axios from 'axios';
import Tabs from 'react-bootstrap/Tabs'
import Tab from 'react-bootstrap/Tab'
import '../StyleSheet.css'

function TabCategory() {
    const baseUrl = 'http://localhost:3001/storeo247/api/v1/staging/product'

    // STATE INITIALIZATION 
    const [ category, setCategory ] = useState([]);
    const [key, setKey] = useState([]);
   
    // API CALL 
    useEffect( ()  => {

        Axios.get( baseUrl , {
    
         method : 'GET',
         headers : { 'content-type': 'application/json', 'Accept' : 'application/json' },
        } )
     
        .then(res => { 
    
         setCategory(res.data.data);
         
    
                    } ) 
        .catch(err => { 
            console.log(err);
                    } )
    
    }, [] )

const arraymap =  category.map( (post,id)=> {

  return(
  <Tab 
  eventKey={post.main_category_id} 
  title={post.main_category} 
  id={post.main_category_id}
  >  

  <TabContent1 
    categoryid= {key}
  /> 

  </Tab> 
   
 
  );
} )  

    return (

        <div class="container-fluid">

          <h1  > Featured Products  </h1>
         
          <Tabs 
            //  id="controlled-tab-example"
             activeKey={key}
             onSelect={(k) => setKey(k)}
             className="mb-3"   
          >
              { arraymap }

          </Tabs>
              
           
        </div>
    )
}

export default TabCategory

下面的代码是渲染产品的子组件

标签内容.js

import {React, useState, useEffect} from 'react'
import Axios from 'axios';
import '../StyleSheet.css'
import {
    Card, CardImg, CardText, CardBody,
    CardTitle, Button, CardGroup
  } from 'reactstrap';

 
function TabContent1(props) {
    const baseUrl = 'http://localhost:3001/storeo247/api/v1/staging/product  '

    // STATE INITIALIZATION 
    const [ content, setContent ] = useState([]);
    
   // API CALL 
    useEffect( ()  => {


        Axios.get( baseUrl , {
    
         method : 'GET',
         headers : { 'content-type': 'application/json', 
                      'Accept' : 'application/json' },
         params : { id : props.categoryid }
        
        } )
     
        .then(res => { 
    
         setContent(res.data.data);
         console.log(res.data.data)
    
                    } ) 
        .catch(err => { 
            console.log(err);
                    } )
    
    }, [] )


const LoadProductsArray =  

    content.map( (item)=> {

    <>
    { item.products.map( (inneritem) => {
       return(
        <div className="col-11 col-md-6 col-lg-2" key={inneritem.product_id} >
    
          <Card>
            <CardImg width="165px" height="165px"  src= {inneritem.image} alt="Card image preview" />
              <CardBody>
          
                <CardTitle tag="h5">{inneritem.name}</CardTitle>
              
                  <CardText> {inneritem.actual_price}  </CardText>
                    <Button> Add to Cart </Button>
            
              </CardBody>
          </Card> 
   
    
        </div> 
    );
  } )
  } 
</>   
  
})

    return (
  <>
            <div class="container"> 
                <CardGroup>
                  { LoadProductsArray }
                </CardGroup>
            </div> 
           
     
  </>  )
    
}

export default TabContent1;

标签： javascriptreactjsreact-hooksreact-propsuse-effect