reactjs - React: コードは開発サーバーが切断されている場合にのみ機能します

Question

add イベントを追加して、単純な todolist をコーディングしていました。ロジックは問題ないようですが、機能せず、エラーが発生した場合にのみ機能しました:

開発サーバーが切断されました

以下は私のコードです：

componentDidMount() {
    this.addEvent = () => {
        let newEvent = document.getElementById('newEvent').value
        let countBeforeAdd = this.state.itemsReversed.length
        this.state.itemsReversed.push(
            {
                id: countBeforeAdd + 1,
                event: newEvent,
                dueTime: '',
                completed: false
            }
        )
        console.log(this.state.itemsReversed)
    }
}

render() {
    return (
        <main className='mainContent'>
            <form className='toDoListForm' action=''>
                <div className='divAdd'>
                    <input type='text' id='newEvent' name='newEvent' />
                    <button type='button' className='btnAdd' onClick={this.addEvent}>Add</button><br />
                </div>

                {this.state.itemsReversed.map((e, i) => (
                    <div className='divEvent' key={i}>
                        <label className='toDoList_label'>
                            <input className='toDoList_checkbox' type='checkbox' id={'item' + i + 1} name={'item' + i + 1} value={i + 1} onChange={this.handleRemainingCount} /> <span>{e.event}</span>
                        </label><br />
                    </div>
                )
                )}
            </form>
        </main>
    )
}

稼働時のイメージ

うまくいかないとき：