Cuando uso setState para cambiar el objeto, la página se vuelve a cargar, restableciendo todo en la página. Mientras hago una aplicación de tres en raya, aparece una X o un 0 cuando hago clic en divs, pero cuando uso setState para cambiar algo, la página web se restablece y todo vuelve a su posición inicial.
<script type="text/babel"> function TicTacToe() { const [state, setState] = React.useState({ turn: 0, player: 'player1' }); function changePlayer() { if (state.player === 'player2') { setState({ ... state, player: 'player1' }) } else if (state.player === 'player1') { setState({ ... state, player: 'player2' }) } } function playerTurn() { if (state.turn % 2 === 0) { setState({ ... state, player: 'player1' }) } else { setState({ ... state, player: 'player2' }) } } function columnClicked(event) { let element = event.target; if (state.player === 'player2') { element.innerHTML= '<h1 class="symbols">0</h1>'; } else if (state.player === 'player1') { element.innerHTML= '<h1 class="symbols">X</h1>'; } } return ( <div> <Heading /> <div className='container'> <CreateRow /> <CreateRow /> <CreateRow /> </div> <button onClick={ changePlayer }>Change Player</button> </div> ); } ReactDOM.render(<TicTacToe />, document.getElementById('tic_tac_toe')); </script>Evita que un navegador se vuelva a cargar/actualizar usando event.preventDefault() de la siguiente manera.
function changePlayer(event) { event.preventDefault() if (state.player === 'player2') { setState({ ... state, player: 'player1' }) } else if (state.player === 'player1') { setState({ ... state, player: 'player2' }) } }Hay dos cosas diferentes y dos enfoques diferentes:
Si desea detener el re-renderizado innecesario:
shouldComponentUpdate() { return false; // This will cause component to never re-render. } Si desea detener la actualización innecesaria en setState :
demoFunction(event) { event.preventDefault(); this.setState({sample: true}); }