记一次“拷贝”的前端代码出错

时间:2021-09-12 19:28:45

遇到了一个差点让我用玄学去解释的问题,最后终于还是找到原因了。更加坚定了一个信念

计算机世界里没有毫无原因的错误,所有的问题都能找到对应的解释。

一、问题出现

登录页面,点击登录按钮,页面刷新,但是又回到了登录页面。

登录跳转代码(代码一):

 1 <div className="container">
2 <form className="form-signin">
3 <h2 className="form-signin-heading">Please sign in</h2>
4 <label htmlFor="inputEmail" className="sr-only">Email address</label>
5 <input type="text" id="inputEmail" className="form-control" placeholder="Email address" required autofocus/>
6 <label htmlFor="inputPassword" className="sr-only">Password</label>
7 <input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
8 <div className="checkbox">
9 <label><input type="checkbox" value="remember-me"/> Remember me</label>
10 </div>
11 <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={() => login('Lings','123456')}>Sign in</button>
12 </form>
13 </div>

二、问题排查

跟踪日志,发现确实执行了跳转动作,但是结束后又访问了"/"路径,我配置的是登录页面,所以又回到了登录页面。

可能前端的高手一眼就能发现问题:

button的type设置为了submit,隐含着一个默认的提交动作。

三、修改测试

将button的type修改为button

<button className="btn btn-lg btn-primary btn-block" type="button" onClick={() => login('Lings','123456')}>Sign in</button>

四、问题解决

Duang~问题解决!老老实实的跳转了,不再跳回登录页面了。

 

五、新的问题

我反而陷入了更大的疑惑,因为这个代码是我从一个运行的好好的项目”拷贝“过来的,那个项目怎么没有这个问题?
再看看另外一个项目的代码:

 1 <div className="container">
2 <form className="form-signin">
3 <h2 className="form-signin-heading">Please sign in</h2>
4 <label htmlFor="inputEmail" className="sr-only">Email address</label>
5 <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus/>
6 <label htmlFor="inputPassword" className="sr-only">Password</label>
7 <input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
8 <div className="checkbox">
9 <label><input type="checkbox" value="remember-me"/> Remember me</label>
10 </div>
11 <button className="btn btn-lg btn-primary btn-block" type="submit" onClick={() => login('Lings','123456')}>Sign in</button>
12 </form>
13 </div>

这个button的type也设置为了submit,为啥这个就不报错?

六、个人的一个看法

正常情况下,完全一样的代码和输入,每次得到完全不同的结果是不可能的。偶尔有一次偏差倒是可以理解。

那就对比代码吧,看到不一样的了!!!

七、一个差别
A. 代码一

5:<input type="text" 

B. 代码二

5:<input type="email"

八、更新的问题

这个类型不一样为啥会导致submit不生效?

九、问题找到

在测试登录的时候,我在这个input输入的"admin"。

在代码一中,符合text的文本类型的校验。
在代码二中,不符合email的正则,校验出错。

所以代码二中的submit动作就没有触发!

十、一个感想

强大的封装库让代码”敲打“更轻松了。但是问题排查呢?至少在不是非常了解一个组件的时候,可能会带来更多的想不到吧。

凡事皆是如此,一看”取舍“,二看”格“。