javascript - 递增和递减计数器未正确设置状态
问题描述
我正在尝试创建一个简单的组件来充当计数器!有两个计数器,一个用于计算重复次数,另一个用于计算举起的数量。出于某种原因,我编写的函数没有按预期工作。
预期的结果是,当我单击向上或向下箭头表示代表时,它应该更新状态中的那个数字。取消的金额也是如此。
但是发生的事情是,当我单击向上和向下箭头让我们说,代表再次,它可以正确地增加和减少,但是当我然后单击箭头增加和减少提升的量时,返回 NaN,然后如果我之后单击代表箭头,然后返回 NaN。
这是我的相关代码:
class TrackProgress extends Component {
constructor(props) {
super(props);
this.state = {
id: parseInt(this.props.match.params.id),
exercise: [],
trackProgress: {
exercise_id: parseInt(this.props.match.params.id),
date: "",
reps: 0,
amountLifted: 0
}
};
}
handleChanges = e => {
this.setState({
trackProgress: {
...this.state.trackProgress,
[e.target.name]: e.target.value
}
});
};
repsIncrease = () => {
this.setState({
trackProgress: {
reps: this.state.trackProgress.reps + 1
}
});
};
repsDecrease = () => {
this.setState({
trackProgress: {
reps: this.state.trackProgress.reps - 1
}
});
};
amountLiftedIncrease = () => {
this.setState({
trackProgress: {
amountLifted: this.state.trackProgress.amountLifted + 1
}
});
};
amountLiftedDecrease = () => {
this.setState({
trackProgress: {
amountLifted: this.state.trackProgress.amountLifted - 1
}
});
};
render() {
return (
<div className="track-progress-container">
<div className="track-progress-content">
<div className="heading">
<h1>Start Tracking</h1>
<h2>{this.state.exercise.exerciseTitle}</h2>
</div>
<form className="tracking-form-container" onSubmit={this.onSubmit}>
<div className="rep-lift-flex">
<div>
<h6>REPS</h6>
<input
name="reps"
type="text"
placeholder="OO"
value={this.state.trackProgress.reps}
onChange={this.handleChanges}
/>
</div>
<div>
<h6>LIFTED</h6>
<input
name="amountLifted"
type="text"
placeholder="OO"
value={this.state.trackProgress.amountLifted}
onChange={this.handleChanges}
/>
</div>
</div>
<div className="arrow-container">
<div className="rep-arrows">
<img
src={down}
alt="decrease"
name="decrementReps"
className={
this.state.trackProgress.reps === 0 ? "inactive" : ""
}
onClick={this.repsDecrease}
/>
<img
src={up}
alt="increase"
name="incrementReps"
onClick={this.repsIncrease}
/>
</div>
<div className="lift-arrows">
<img
src={down}
alt="decrease"
name="decrementLifted"
onClick={this.amountLiftedDecrease}
className={
this.state.trackProgress.amountLifted === 0
? "inactive"
: ""
}
/>
<img
src={up}
alt="increase"
name="incrementLifted"
onClick={this.amountLiftedIncrease}
/>
</div>
</div>
<h6>Date</h6>
<input
name="date"
type="date"
placeholder="e.g. June 11, 2019"
value={this.state.trackProgress.date}
onChange={this.handleChanges}
className="date"
/>
<button type="submit" className="track-btn">
TRACK EXERCISE
</button>
</form>
</div>
</div>
);
}
}
export default TrackProgress;
在我写出更具体的功能之前,这是我的初始功能。他们都产生了相同的结果。
reps = event => {
if (event.target.name === "incrementReps") {
this.setState({
trackProgress: {
reps: this.state.trackProgress.reps + 1
}
});
} else if (event.target.name === "decrementReps") {
this.setState({
trackProgress: {
reps: this.state.trackProgress.reps - 1
}
});
}
};
amountLifted = event => {
if (event.target.name === "incrementLifted") {
this.setState({
trackProgress: {
amountLifted: this.state.trackProgress.amountLifted + 1
}
});
} else if (event.target.name === "decrementLifted") {
this.setState({
trackProgress: {
amountLifted: this.state.trackProgress.amountLifted - 1
}
});
}
};
我可能会遗漏关键逻辑或无法解释某些事情,我已经盯着这个看了好几个小时,所以我们将不胜感激帮助解决这个问题!谢谢!!
解决方案
当您更新代表或提升量时,您将替换整个 trackProgress 对象。你的状态是:
this.state = {
id: parseInt(this.props.match.params.id),
exercise: [],
trackProgress: {
exercise_id: parseInt(this.props.match.params.id),
date: "",
reps: 0,
amountLifted: 0
}
}
为 reps 调用您的更新函数或当前替换整个 trackProgress 对象,而不仅仅是更新您想要的属性。
repsIncrease = () => {
this.setState({
trackProgress: {
reps: this.state.trackProgress.reps + 1
}
});
};
导致:
state = {
id: 1,
exercise: [],
trackProgress: {
reps: 1,
}
}
要解决此问题,您可以在 repsIncrease/decrease 函数中包含所有先前的属性,或使用扩展运算符自动填写它们。这是固定 repsIncrease 函数的示例。
repsIncrease = () => {
this.setState({
trackProgress: {
...this.state.trackProgress,
reps: this.state.trackProgress.reps + 1
}
});
};
推荐阅读
- node.js - MongoDb / 查找 + 更新文档
- heroku - 如何防止 Heroku H12 在 Java REST 服务器上长时间运行进程的“请求超时”
- python - 运行多个或选择性 python 脚本的 shell 脚本
- xpath - 我如何才能在下表中找到仅用于“总病例”的 xpath 或 CSS 选择器(url =this https://www.worldometers.info/coronavirus/)
- javascript - 反应循环并创建元素
- java - java - 如何为其模型中文本的不同代码点自定义Java 9+ JTextField的视图?
- python - 在 python 中不使用函数或列表检查 min max
- javascript - 如何在声明的值中添加一个数字?
- java - 如何在单个输入中输入超过两个单词的字符串?
- reactjs - npm 错误!?看起来反应版本不匹配