javascript - 是什么导致网页重新加载？

Question

我构建了一个简单的服务来撰写一系列推文，http://tweetsmart.in使用 React 和 Flux。我遇到了一个奇怪的错误，当用户登录并首次单击推文按钮时，页面会重新加载。

如果第二次点击 tweet 按钮，一切都会按预期进行。登录后我才第一次注意到这种行为。 tweet 按钮只是一个 anchor 标记，因此不是导致此问题的按钮的默认提交行为。

重现错误的步骤:

1. 转到 http://tweetsmart.in/popup.html
2. 使用推特登录
3. 登录后在文本框中写一些东西。
4. 点击推特按钮发送推特。

您会发现页面重新加载并且推文失败，但我不确定哪个先发生。当我打开 Chrome 开发人员工具并查看“网络”选项卡时，我发现对 tweet 的 api 调用被取消，接下来发生的事情是页面重新加载。在我看来，页面重新加载导致 api 调用取消。

但是，我在我的代码中放入了一些日志语句进行调试，但我发现了一个异常。单击 Tweet 按钮后，将调度一个 Action 将 Tweets 排队，然后如果有任何排队的 Tweets，则将调度一个后续 Action 以发送第一个排队的 Tweet。这导致 Api 调用 tweetsmart，它被包装在一个 Promise 中，只有当 Promise 成功或失败时，才会将进一步的 Actions 分派(dispatch)到 Store。

但是，从控制台上的日志语句中，我发现我的主要 React 组件的 componentDidUpdate 在页面重新加载之前被调用了。如果推文不成功，Dominic Decoco 将被记录。参见 https://github.com/singhshashi/tweetsmart/blob/master/js/components/TweetSmartApp.react.js

因为我没有向商店发送任何操作，所以我不确定是什么导致 react 组件更新。发生这种情况仅仅是因为页面重新加载吗？这会导致页面重新加载吗？

============更新 1========

React 组件更新是因为 api 调用被取消，因此 TWEET_FAILED 操作被调度。我认为 api 调用被取消的原因是因为触发了重新加载。问题是什么触发了页面重新加载？

Answer 1

好的，所以我找到了问题所在。

Tweet 按钮是一个没有 href 属性的 anchor 标记，因此它的 href 指向当前页面 url，导致页面在被点击时重新加载。

虽然我不确定这是否是有意为之的行为，但我会进一步调查并在发现任何异常情况时发布另一个问题。我怀疑这可能是 jsx 如何转换为 html 的一些错误，因为在 html5 中可以有没有 href 属性的 anchor 标记。请参阅 https://developer.mozilla.org/en/docs/Web/HTML/Element/a 上的 href

我现在的解决方案是将 anchor 标记更改为 type=button 的按钮标记。