当我在 React.js 中使用 setState 函数时页面重新加载答案

【问题标题】：Page reloads when I use the setState function in React.js当我在 React.js 中使用 setState 函数时页面重新加载
【发布时间】：2021-11-10 21:11:26
【问题描述】：

当我使用 setState 更改对象时，页面会重新加载，重置页面上的所有内容。当我正在制作井字游戏应用程序时，当我单击 div 时会出现 X 或 0，但是当我使用 setState 更改任何内容时，网页会重置，将所有内容恢复到初始位置。

<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>

【问题讨论】：

... state 不应该有空格，...state
Here's a JSFiddle 对于这个问题，状态似乎工作正常。如果您能提供重现此问题的 JS fiddle，我们可以更好地为您提供帮助。
您的tic_tac_toe div 是否出于某种原因在表单中？如果是这样，此按钮将提交表单并重新加载页面。如果这是问题所在，请将type="button" 添加到按钮。

标签： javascript html reactjs web

【解决方案1】：

使用event.preventDefault() 防止浏览器重新加载/刷新，如下所示。

        function changePlayer(event) {

            event.preventDefault()

            if (state.player === 'player2') {
                setState({
                    ... state,
                    player: 'player1'
                })
            } else if (state.player === 'player1') {
                setState({
                    ... state,
                    player: 'player2'
                })
            }
        }

【讨论】：