情景描述
- 使用如下的react+redux代码
render(){
<form>
<input type='text' onKeyPress={()=>{
if(e.which === 13){
this.props.dispatchData(..)
} //这里就是dispatch一个action
}}>
</form>
}
- 然后发现整个store被重置
解答
- Q1:我正常的reducer接受步骤是不会导致store被重置，到底是什么造成的？
- A1:本来想通过console的方式发现哪里出了问题，却发现一旦回车之后就页面被刷新了，所有的console也都消失了。
- Q2:既然console不行，也并不能瞎猜，到底该如何判断原因所在呢？
- A2:那么当然采用webstorm的断点功能，查看我们dispatch操作是否正常执行，页面是否正常render，使用这种方式正好可以解决console的东西在刷新之后全部消失
至于webstorm如何进行浏览器断点调试，参见简书-webstorm前端断点调试
Q3:进过断点调试发现整个dispatch和store的更新操作都没有问题，却在这之后执行了某个事件刷新了页面，很显然这已经是我们代码之外的动作了，那么到底是谁造成的？
-
A3:必然是默认事件，这也是我们经常忽略那么这时候补充默认事件的知识
默认事件，指的是浏览器默认事件。当我们点击某一个链接的时候，浏览器会直接跳转，在表单中按回车，表单会自动提交，这些都是浏览器的默认行为。
因此我们可以确定发生了浏览器onKeyPress的默认提交行为
- Q4:那么到底是什么行为？
- A4:我尝试去除if发现，其他的所有字母输入都不会触发页面刷新，只有回车会触发.可以初步断定是浏览器的enter事件造成的，根据以上知识，猜想出发了表单提交。那么我们现在要是确定表单提交的默认事件能够造成页面跳转（刷新）即可确定。根据研究在表单最后一个input元素中敲回车，会触发表单提交,在action没有重置的时候，会将表当提交到当前的url
- 解决：因此我们可以通过去除enter的默认事件解决
if(e.which === 13){
e.preventDefault();
}
反思
- 发现自己遇到坑自己竟然再踩还能陷下去。针对默认事件这件事，我已经入坑了无数次了，但是每次都忘记。这个事情该怎么呀？
- 我发现着断点调试是很好用，但是发现使用的时候除了看些数据的值没有什么其他的用处，可能还是自己不太能发掘所有功能，求教
