React中仅执行console.log的onClick事件触发整页刷新问题排查

你的新增按钮放在表单容器内部，原生HTML规范中，<button>标签如果不显式指定type属性，默认type值为submit。点击这类按钮会直接触发表单原生提交行为，默认提交逻辑就是重载当前页面，这个行为和React组件的state更新、props变化完全无关。
另外你的代码存在方法名拼写不匹配问题：定义的回调是handleAddNewRow，但onClick绑定的是this.handleAddNewStore，如果组件实例上不存在这个方法，点击事件会直接冒泡到表单节点，进一步触发默认提交刷新逻辑。

两种方案选一种即可解决：

• 给按钮显式添加type="button"属性，声明这是普通功能按钮，不关联表单提交行为

  <button type="button" onClick={this.handleAddNewRow}>
    Add New Store
  </button>
  

• 在事件回调中拦截原生默认行为，注意修正绑定的方法名和定义的方法名保持一致

  handleAddNewRow = (e) => {
    e.preventDefault()
    console.log('adding new row')
    // 后续取消注释setState逻辑即可正常新增行
  }
  

你注释setState、用React.memo()包裹组件的操作，都是针对React虚拟DOM渲染层的优化，而这个刷新问题是原生DOM的默认行为触发的，根本没有走到React的重渲染判断流程，所以这些操作不会对问题产生任何影响。

内容的提问来源于stack exchange，提问作者John McGellan