如何解决在React中重置状态是否是此代码的错误做法?
我的投票状态适用于4个不同的对象,但我的问题是reset方法是否正确,或者是否应该折射我的initialState对象,因此我无需在reset方法中重复自己。每个对象的增量器和重置按钮在被调用时均有效。
类函数扩展了React.Component {
static initialState = {
waves : [
{id: 'Pipeline',votes: 0},{id: 'Backdoor',{id: 'Froggies',{id: 'Waimea',votes: 0}
]
}
constructor(props){
super(props);
this.state = Functions.initialState;
}
reset(e) {
if (e) e.preventDefault();
this.setState({
waves : [
{id: 'Pipeline',votes: 0}
]
});
}
add (i) {
let oldWaves = [...this.state.waves]
oldWaves[i].votes++
this.setState({waves: oldWaves})
}
render() {
return (
<div className='waves'>
<h1>Vote for your favorite wave!</h1>
{this.state.waves.map((wave,i) =>
<div key={i} className='wave'>
<div className='voteCount'>
{wave.votes}
</div>
<div className='waveDetails'>
{wave.id}
<button onClick={this.add.bind(this,i)}>X</button>
</div>
</div>
)}
<button onClick={this.reset.bind(this)} className='resetButton'>Reset </button>
</div>
)
}
}
解决方法
无需重复相同的状态对象。如您所想,改为引用先前的对象会更有意义。
reset(e) {
if (e) e.preventDefault();
this.setState(Functions.initialState);
}
但是您在add
方法上也遇到了一个错误-您正在对现有状态对象进行变异,这绝对不应该在React中完成。修复它:
add (i) {
const oldWaves = [...this.state.waves];
const wave = oldWaves[i];
oldWaves[i] = { ...wave,votes: wave.votes + 1 };
this.setState({waves: oldWaves})
}
或
add (i) {
const { waves } = this.state;
const newWaves = [
...waves.slice(0,i),{ ...waves[i],votes: waves[i].votes + 1 },...waves.slice(i + 1)
];
this.setState({ waves: newWaves });
}
,
您确实可以使用initialState
来避免重复代码。
reset(e) {
if (e) {
e.preventDefault();
}
this.setState(this.initialState);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。