Reactjs react中购物车应用程序中的项目id存在问题_Reactjs_Redux_React Redux

Reactjs react中购物车应用程序中的项目id存在问题

reactjs redux

Reactjs react中购物车应用程序中的项目id存在问题,reactjs,redux,react-redux,Reactjs,Redux,React Redux,我正在开发一个购物车应用程序。我正在使用redux和路由。主要有3页主页，商店和关于。我正在将身份验证添加到商店页面，成功身份验证后，用户可以进入商店页面。在商店页面中有我们可以添加到购物车的项目。我的店铺页面上总共有3件商品。我的问题是，当我单击“添加到购物车”以获取第一件商品时，它会显示3件商品。我知道问题出在物品的id上。但在过去的一个小时里，我一直在努力解决这个问题提前谢谢 //App.js import React ,{Component} from 'react'; import

我正在开发一个购物车应用程序。我正在使用redux和路由。主要有3页主页，商店和关于。我正在将身份验证添加到商店页面，成功身份验证后，用户可以进入商店页面。在商店页面中有我们可以添加到购物车的项目。我的店铺页面上总共有3件商品。我的问题是，当我单击“添加到购物车”以获取第一件商品时，它会显示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);

//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

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

您的店铺项目处于店铺组件状态，但必须位于redux模块内

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

当然，这是因为你正在硬编码你的商店物品。您可能希望从API获取商店项目

当您单击“添加到购物车”按钮时，您必须将itemId传递给action。现在你不知道哪一个项目将添加到购物车

然后在reducer action.payload.itemId中添加itemId到购物车中，然后您可以这样做

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

现在您在productsitems数组中找到了项

您可以将此项目添加到另一个名为basket或cart的数组中，该数组表示用户添加的项目

在下一步中，您需要添加inventory and quantity属性，以查看用户需要多少项以及您的库存中有多少项

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

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