2017812

情景描述

• 使用如下的react+redux代码

render(){
  

    {
        if(e.which === 13){
            this.props.dispatchData(..)
        }  //这里就是dispatch一个action
    }}>
   
}

• 然后发现整个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();
}

反思

• 发现自己遇到坑自己竟然再踩还能陷下去。针对默认事件这件事，我已经入坑了无数次了，但是每次都忘记。这个事情该怎么呀？
• 我发现着断点调试是很好用，但是发现使用的时候除了看些数据的值没有什么其他的用处，可能还是自己不太能发掘所有功能，求教