这段代码在 React 中重置状态是不好的做法吗？

Question

我有一个应用于 4 个不同对象的投票状态，但我的问题是重置方法是否正确，或者我是否应该折射我的 initialState 对象，所以我不需要在重置方法中重复自己。每个对象的增量器和重置按钮在调用时起作用。

class 函数扩展 React.Component {

static initialState = {
    waves : [
        {id: 'Pipeline', votes: 0},
        {id: 'Backdoor', votes: 0},
        {id: 'Froggies', votes: 0},
        {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},
            {id: 'Backdoor', votes: 0},
            {id: 'Froggies', votes: 0},
            {id: 'Waimea', 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>
)
}

}

Answer 1

无需再次重复相同的状态对象。正如您所想，改为引用先前的对象会更有意义。

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

Answer 2

您确实可以使用 initialState 来避免重复代码。

reset(e) {
    if (e) {
        e.preventDefault();
    }

    this.setState(this.initialState);
}

这段代码在 React 中重置状态是不好的做法吗？

Is this code bad practice for resetting state in React?

javascript

reactjs

react-state