反应中购物车应用程序中项目的ID问题

Question

我正在开发一个购物车应用程序。我正在使用 redux 和 routing 。主要有3页首页，商店和关于。我正在向商店页面添加身份验证，成功验证后用户可以进入商店页面。在商店页面中有我们可以添加到购物车的商品。我的商店页面中总共有 3 件商品。我的问题是当我单击添加到购物车的第 1 件商品时，它显示 3 件商品。我知道问题出在物品的 ID 上。但我在过去一小时内一直在努力解决它。

提前致谢。

//App.js

import React ,{Component} from 'react';
import './App.css';
import Navigation from './Step1/Navbar' 
import Home from './Step1/Home'
import Shop from './Step1/Shop'
import About from './Step1/About'
import Login from './LoginAuthentication/Loginform'
import {BrowserRouter as Router,Route} from 'react-router-dom'
import {connect} from 'react-redux'

const mapStateToProps=(state)=>{

  return{
     isLogin:state.isLogin
  }
}

class  App extends Component {
  render(){
  return (
    <Router>
    <div className="App">
      <Navigation/>
      <Route path="/" exact component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/shop"
       render={() =>(
           this.props.isLogin ? <Shop/> : <Login/>
        ) }

      />
    </div>
    </Router>
  );
}
}
export default connect(mapStateToProps,null)(App);

//shop template.js

import React from 'react'
//import logo from '../cricket bat.jpg'
import Displaylist from '../Components/DisplayList'
const Shop_template=(props)=> {
    return (
        <div className="container">
                <div className="row">
                  <div className="col-sm-6">
                       <div className="card-body">
                        <h4 className="card-title">{props.cardtitle}</h4>
                        <p className="card-text">{props.description}</p>
                        <h3>Price :{props.currency}{props.price}</h3>
                       <button type="button" onClick={props.cartHandler} className="btn btn-primary">Add to cart</button>
                     </div>
                     </div>

                     <div className="col-sm-6">
                        <Displaylist/>
                    </div>
                     </div>

                  </div>

    )
}

export default Shop_template

//shop.js --> 我正在将shop.js中的状态更新为redux状态

import React, { Component } from 'react'
import ShopTemplate from './Shop_template'
import {connect} from 'react-redux'
import {action2} from '../Actions/action1'
const mapDispatchToProps=(dispatch)=>({

    CartHandler:(details)=>dispatch(action2(details))

})
 class Shop extends Component {
    state={
        items:[
            {id:1,cardtitle:'SSS Bat',description:'A stroke to score',currency:'$',price:100},
            {id:2,cardtitle:'One upon a wall street',description:'A way to investment',currency:'$',price:50},
            {id:3,cardtitle:'mi powerbank 10000mah',description:'Keep charged always',currency:'$',price:200}
        ]
    }

    cartHandler=()=>{
       this.props.CartHandler(this.state.items)
    }
    render() {

         const info=this.state.items.map((detail)=>{
             return <ShopTemplate 
              cardtitle={detail.cardtitle}
              description={detail.description}
              currency={detail.currency}
              price={detail.price}
              key={detail.id}
              cartHandler={this.cartHandler}
             />
         })

        return (
            <div>
             {info}
            </div>

        )
    }
}

export default connect(null,mapDispatchToProps)(Shop)

/

/reducer.js

import {LOGINCHECK} from '../Constants/actiontypes'
import {ADDTOCART} from '../Constants/actiontypes'
const initialState={
   isLogin:false,
   items:[]
}
const reducer1=(state=initialState,action)=>{

   //console.log(state)
   if(action.type===LOGINCHECK){
      return Object.assign({},state,{isLogin:true})
   }
   if(action.type===ADDTOCART){
      return Object.assign({},state,{items:state.items.concat(action.payload)})
   }

   return state
}

export default reducer1

//DisplayList.js

import React from 'react'
import Display from './Display'
import {connect} from 'react-redux'

const mapStateToProps=(state)=>{

    return{
    items:state.items
}
}

const DisplayList=({items})=>{
   console.log(items.body)
    return(
        <div>

     {items.map(it=>{

       return(
           <Display iteminfo={it.body} key={it.body.id}/>
       )

     })
 }


        </div>
    )

}


export default connect(mapStateToProps,null)(DisplayList)

//Display.js

import React from 'react'

const Display=({iteminfo:{id,cardtitle, description,currency,price}}) =>{

    return (
        <div>

        <h4>{cardtitle}</h4>
        <p>{description}</p>
        <h3>{currency}{price}</h3>  
        <button type="button" className="btn btn-danger">Remove From cart</button> 
        </div>
    )
}

export default Display

Answer 1

我可以在你的源代码中看到太多的问题， 首先，命名可能会更好，现在它令人困惑。

您的商店商品处于 Shop 组件状态，但它必须位于您的 redux 模块中

initialState = {
    items: ["your items should be here"]
}

当然，这是因为您对商店商品进行了硬编码。您可能想从 API 获取商店商品。

当您单击添加到购物车按钮时，您必须将 itemId 传递给操作。 （现在您不知道要添加到购物车的商品）。

然后在 reducer action.payload.itemId 中将 itemId 添加到购物车然后你可以做这样的事情

 const foundItem = state.items.find(it => it.id === action.payload.itemId);

现在您在 products(items) 数组中找到了商品，

您可以将此商品添加到另一个称为购物篮或购物车的数组中，该数组表示用户添加的商品。

对于下一步，您要添加库存和数量属性以查看用户想要多少商品以及您的库存中有多少商品

如果您想要更详细的描述，请不要犹豫