reactjs - React：代码仅在开发服务器断开连接时才有效

Question

我正在编写一个简单的 todolist，向它添加一个 add 事件。逻辑似乎没有问题，但它不起作用，只有在出现错误时才起作用：

开发服务器已断开连接

下面是我的代码：

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

工作时的图像

当它不起作用时：