反应不正常的模态--剩余
反应不正常的模态--剩余
提问于 2021-08-07 09:56:59
我正试着制作一个反应购物页面。Redux用于商店管理。在我的主页上，我有两个按钮对每个购物产品。在点击细节按钮，我需要显示一个模式/弹出式与相应的产品详细信息从商店。我设法用细节来显示模型，但是modal显示的是每个按钮的第一个产品的细节，而不是相应的产品细节(如您在图像中所看到的)。对于每个按钮，都会显示初始状态的第一个产品细节)。有谁能解决这个问题吗？(我对js不熟悉，对此有何反应)
Home.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addToCart } from './actions/cartAction'
class Home extends Component{
render(){
let itemList = this.props.items.map(item=>{
return(
<div class="col-md-6 col-sm-6 col-xs-12 col-lg-4 col-xl-4 bttm-pad">
<div class="card " key={item.id} >
<img class="card-img-top" src={item.img} alt={item.title} />
<div class="card-body">
<h5 class="card-title">{item.title}</h5>
<p class="card-text">{item.desc}</p>
<p class="card-text "><b>Price: <span class="WebRupee">₹
</span> {item.price}</b></p>
<a type="button" data-toggle="modal" data-target="#myModal"
class="btn btn-primary ">Detail</a>
<a class="btn btn-primary" onClick={()=>{ this.props.addToCart(item.id)}} >Add to cart</a>
</div>
</div>
</div>
)
})
let modalList = this.props.items.map(modal=>{
return(
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Product Detail</h4>
<button type="button" class="close" data-dismiss="modal" >×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-3 text-center">
<img src={modal.img} alt="Product Image" class="img-fluid z-depth-1-half rounded"/>
<div style={{height: 10}}></div>
</div>
<div class="col-9 text-left">
<p><strong>{modal.title}</strong></p>
<p class="card-text text-left">
{modal.desc}
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
)
})
return(
<div className="container">
<div className="row home-head">
<div className="col-md-12 text-center">
<h1><strong>Store Items</strong></h1>
</div>
</div>
<div className= "row">
{itemList}
{modalList}
</div>
</div>
);
}
}
const mapStateToProps = (state)=>{
return {
items: state.items
}
}
const mapDispatchToProps= (dispatch)=>{
return{
addToCart: (id)=>{dispatch(addToCart(id))}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Home)cartReducer.js
const initState = {
items: [
{id:1,title:'Winter body', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:15510,img:Item1},
{id:2,title:'Jordan Delta 2', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:11150,img: Item2},
{id:3,title:'Nike Air Force 1 07', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.",price:8199,img: Item3},
{id:4,title:'KD14 EP', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:13490,img:Item4},
{id:5,title:'Nike ACG Mountain Fly', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.", price:16595,img: Item5},
{id:6,title:'Nike Air Vapormax Evo SE', desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, ex.",price:17999,img: Item6}
],
addedItems:[],
total: 0
}
const cartReducer= (state = initState,action)=>{
if(action.type === ADD_TO_CART){
let addedItem = state.items.find(item=> item.id === action.id)
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;
let newTotal = state.total + addedItem.price
return{
...state,
addedItems: [...state.addedItems, addedItem],
total : newTotal
}
}
}
else{
return state
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-07 11:03:53
您正在为每个切换和模式生成相同的重复modalId：
<a
type="button"
data-toggle="modal"
data-target="#myModal"
class="btn btn-primary "
>
Detail
</a>和
<div class="modal" id="myModal">因此，当您单击带有modalId的标记时，它将显示第一个已找到的模式，该标记中有相同的id。要使当前代码正常工作，您需要为每个标记和模式设置uniqueId。
然而，并不是为每个产品显示模式的好方法。
在这种情况下，您正在使React呈现方式太多不必要的DOM节点，太多的modals。
我强烈建议您为该模式创建另一个组件，然后从您选定的产品中传递道具并相应地显示它。这样，就不会使React呈现不必要的DOM节点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68691270
复制相关文章
相似问题
腾讯云开发者
