在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);
}