Reactjs 总负片和数量显示

大家好，你可以叫我Neff，我是这个网站的新手，当然是React的初学者， 我向你解释我的问题

我想创建一个电子商务网站，在我的第一次测试中，我创建了我的产品（见图）

今天，我使用sql来显示产品

所以我的问题是

我不会地图，在照片里会更容易理解

一方面我可以显示没有数量的漫画，另一方面我可以显示没有数量的漫画，你看到我的问题了吗

我为我的英语感到抱歉， 提前感谢大家的帮助 内夫

一,

getRandom=async（）=>{
const res=等待axios.get(
'http://localhost:5252/api/allproducts'
)
this.setState（{data:res.data}）
}
componentDidMount（）{
这个是getRandom（）
}
render（）{
console.log（this.state.data）
console.log（this.state.data）
const externalCloseBtn=×；；
让datas=this.state.data.map（datas=>{
返回(
this.toggle（datass.id）}>{this.props.buttonLabel}
{datass.title}
{datass.price}€

二,

让addedItems=this.props.items.length？
(
this.props.items.map（item=>{
返回(
{项目数量}€

试着解释清楚，从这里我无法理解你的问题。

const initState = {
category: [{id: 1, name:'bieres'}],
items: [


    {id:1,title: "Hype PA (Demi-Pinte)", desc:"Pression - Biére Blonde", qty:"25 cl", img: hypePa, price: 3.50, ctg: 1, },
    {id:2,title:'Hype PA (Pinte)', desc: "Pression - Biére Blonde ",qty:"50 cl", price:6 ,img: hypePa, bieres: "bieres",},
    {id:3,title:'Houblons des blés (Demi-Pinte)', desc: "Pression - Biére Blonde",qty:"25 cl", price: 3.50, img: houblonCommeLesBles, ctg: "bieres",},
    {id:4,title:'Houblons des blés (Pinte)', desc: "Pression - Blonde ",qty:"50 cl",  price:6 ,img: houblonCommeLesBles, ctg: "bieres",},
    {id:5,title:'Session IPA (3,6°)', desc: "Biére Blonde ",qty:"Bouteille",  price:5,img:sessionIpa, ctg: "bieres", },
    {id:6,title:'Sour Kefir (5,9°)', desc: "Biére Blonde", qty:"Bouteille", price:6,img: sourkefir, ctg: "bieres",},
    {id:7,title:'Brown Ale (5,4°)', desc: "Biére blonde", qty:"Bouteille", price:5.5,img: brownAle, ctg: "bieres",},

],

addedItems:[],
total: 0,

 }
  const cartReducer= (state = initState,action)=>{



//INSIDE HOME COMPONENT
if(action.type === ADD_TO_CART){
      let addedItem = state.items.find(item=> item.id === action.id)
      //check if the action id exists in the addedItems
     let existed_item= state.addedItems.find(item=> action.id === item.id)
     if(existed_item)
     {
        addedItem.quantity += 1 
         return{
            ...state,
             total: state.total + addedItem.price 
              }
    }
     else{
        addedItem.quantity = 1;
        //calculating the total
        let newTotal = state.total + addedItem.price 

        return{
            ...state,
            addedItems: [...state.addedItems, addedItem],
            total : newTotal
        }

    };
}
if(action.type === REMOVE_ITEM){
    let itemToRemove= state.addedItems.find(item=> action.id === item.id)
    let new_items = state.addedItems.filter(item=> action.id !== item.id)

    //calculating the total
    let newTotal = state.total - (itemToRemove.price * itemToRemove.quantity )
    console.log(itemToRemove)
    return{
        ...state,
        addedItems: new_items,
        total: newTotal
    }
}



//INSIDE CART COMPONENT
if(action.type=== ADD_QUANTITY){
    let addedItem = state.items.find(item=> item.id === action.id)
      addedItem.quantity += 1 
      let newTotal = state.total + addedItem.price
      return{
          ...state,
          total: newTotal
      }
}
if(action.type=== SUB_QUANTITY){  
    let addedItem = state.items.find(item=> item.id === action.id) 
    //if the qt == 0 then it should be removed
    if(addedItem.quantity === 1){
        let new_items = state.addedItems.filter(item=>item.id !== action.id)
        let newTotal = state.total - addedItem.price
        return{
            ...state,
            addedItems: new_items,
            total: newTotal
        }
    }
    else {
        addedItem.quantity -= 1
        let newTotal = state.total - addedItem.price
        return{
            ...state,
            total: newTotal
        }
    }

}

if(action.type=== ADD_SHIPPING){
      return{
          ...state,
          total: state.total + 6
      }
}

if(action.type=== 'SUB_SHIPPING'){
    return{
        ...state,
        total: state.total - 6
     }
      }

  else{
  return state
    }

 }

export default cartReducer;

getRandom = async () => {

    const res = await axios.get(
        'http://localhost:5252/api/allproducts'
    )
    this.setState({ data: res.data })
}
componentDidMount() {
    this.getRandom()
}



render() {
    console.log(this.state.data)
    console.log(this.state.data)
    const externalCloseBtn = <button className="crossModal" style= 
  {{ position: 'absolute', top: '15px', right: '15px' }} onClick= 
{this.toggle}>&times;</button>;

    let datas = this.state.data.map(datass => {
        return (
            <div className="homeProduct">
                <button className="buttonContainerHome" onClick={() 
      => this.toggle(datass.id)}>{this.props.buttonLabel}

                    <Media  >
                        <Media body 
 className="mediaBodyContainerHome">
                            <div className="mediaBodyTitle">
                                <Media heading 
     className='MediaTextHome'>
                                    {datass.title}
                                </Media>

                                <Media className='MediaTextHome2'>
                                    {datass.price} €
                            </Media>
                            </div>
 </button>

  let addedItems = this.props.items.length ?
        (
            this.props.items.map(item => {
                return (
     <Media className='MediaTextHome2'>
                                {item.quantity} €
                            </Media>