javascript - 如何分别显示一个状态的每个项目的点击次数?
问题描述
到目前为止,单击 4 种食物类型中的任何一种后,它们都会毫无问题地出现在模式中。
这是问题所在:
每当我第一次单击任何按钮时,0
都会显示 a。每当我再次单击任何按钮(除了我之前单击的那个)时,1
都会显示 a。
每当我第三次再次单击任何按钮(除了我之前单击的那个)时,2
都会显示 a。每当我再次单击任何按钮(除了我之前单击的那个)时,都会3
出现一个。
我想显示单独单击按钮的次数。例如,如果我单击了Chicken Taco
4 次并单击了Beef Taco
2 次,那么2
并且4
应该出现在模态中。
这是我的代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';
import Aux from '../../../../hoc/Aux';
import FoodButton from '../FoodButtons/FoodButton';
import CheckoutButton from '../CheckoutButton/CheckoutButton';
import axios from '../../../../axios-foodChosen';
import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";
class TacoTypes extends Component {
constructor(props) {
super(props);
this.state = {
selectedItems: [],
foodClicks: {
cTacoClicked: 0,
bTacoClicked: 0,
cBurritoClicked: 0,
bBurritoClicked: 0,
}
};
//Constant item names
this.items = {
chickenTaco: 'Chicken Taco',
beefTaco: 'Beef Taco',
chickenBurrito: 'Chicken Burrito',
beefBurrito: 'Beef Burrito'
};
}
componentWillMount() {
// for modal
Modal.setAppElement('body');
}
selectFood(food) {
this.setState(state => {
let selected = state.selectedItems;
let cTaco = state.foodClicks.cTacoClicked;
let bTaco = state.foodClicks.bTacoClicked;
let cBurrito = state.foodClicks.cBurritoClicked;
let bBurrito = state.foodClicks.bBurritoClicked;
if(!selected.includes(food)) {
selected.push(food);
}
return {
selectedItems: selected,
cTacoClicked: cTaco + 1,
bTacoClicked: bTaco + 1,
cBurritoClicked: cBurrito + 1,
bBurritoClicked: bBurrito + 1
};
});
}
render() {
return (
<Aux>
{Object.keys(this.items).map(key => (
<FoodButton clicked={() => this.selectFood(key)} key={key} label={this.items[key]}/>
))}
<CheckoutButton clicked={() => this.props.openModalRedux()}/>
<Modal isOpen={this.props.isOpen}>
{this.state.selectedItems.map(key => (
<div key={key}>
<p key={key}>{this.items[key]}</p>
</div>
))}
{Object.keys(this.state.selectedItems.map(key => (
<div key={key}>
<p key={key}>{this.state.foodClicks[key]}</p><br/>
</div>
)))}
<button onClick={() => this.props.closeModalRedux()}>Close</button>
</Modal>
</Aux>
);
}
}
const mapStateToProps = state => {
return {
// props for modal
isOpen: state.global.isModalOpen,
}
};
const mapDispatchToProps = dispatch => {
return {
// Modal handlers
openModalRedux: () => dispatch({type: OPEN_MODAL}),
closeModalRedux: () => dispatch({type: CLOSE_MODAL})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);
解决方案
cTacoClicked: cTaco + 1,
bTacoClicked: bTaco + 1,
cBurritoClicked: cBurrito + 1,
bBurritoClicked: bBurrito + 1
目前,您正在向所有食物点击计数器添加 1。相反,您应该只增加所选食物的计数器。
在constructor()
中,使用项目键作为点击计数器键以简化操作。像这样初始化状态:
this.state = {
selectedItems: [],
foodClicks: {
chickenTaco: 0,
beefTaco: 0,
chickenBurrito: 0,
beefBurrito: 0,
}
};
这是实现selectFood()
:
selectFood(food) {
this.setState(state => {
let selected = state.selectedItems;
if(!selected.includes(food)) {
selected.push(food);
}
return {
selectedItems: selected,
foodClicks: {
...state.foodClicks,
[food]: state.foodClicks[food] + 1
}
};
});
}
推荐阅读
- sql-server - 从 sql 发送邮件
- c - F_mount 函数不适用于 STM32F401ReTx
- asp.net-mvc - 为什么在尝试从 zip 文件与普通文本文件发布内容时会收到 404?
- google-cloud-platform - 从 GCP 云存储中删除 TB 数据的更快方法
- python - 不使用 Python 中的多处理打印内容
- json - ColdFusion10 restAPI 由于特殊字符返回格式错误的 JSON
- neural-network - 以 y=x 作为激活函数的单输入单输出神经网络能否反映非线性行为?
- symfony4 - 了解 @ParamConverter 和 @security 注释
- r - 如何从R中的数据框中删除错误数据
- c++ - C++ 上的奇怪声明