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

Question

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

如果单击推文按钮，第二次按预期工作。这是我登录后第一次注意到这种行为。推文按钮只是一个锚标记，因此它不是导致此操作的按钮的默认提交行为。

重现错误的步骤：

1. 转到http://tweetsmart.in/popup.html
2. 使用twitter登录
3. 登录后在“文本”框中写入内容。
4. 点击推文按钮发推文。

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



但是，我在我的代码中放了一些日志语句来调试，我发现了一个异常现象。单击Tweet按钮后，将调度一个Action对排队进行排队，然后如果有任何排队的推文，则会调度后续的Action以发布第一个排队的Tweet。这导致Api调用tweetsmart，它包含在Promise中，并且只有当Promise成功或失败时，才会将Actions分派给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

如果您的推文失败，请拨打updateStateOnTweetFailed，这将执行以下调度：AppDispatcher.dispatch({actionType:TweetSmartActions.TWEET_FAILURE});。您的商店会侦听此actionType，并会发出更改，导致您重新呈现，从而您的react组件会自行更新。另一方面，页面重新加载我不确定。如果您正在通过此操作调用页面重新加载，则值得检查。

Answer 2

好的，我发现了这个问题。

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

虽然我不确定这是否是预期的行为，但我会进一步调查并发布另一个问题，如果我发现任何不寻常的事情。我怀疑这可能是jsx如何被翻译成html的一些错误，因为在html5中可以有没有href属性的锚标签。请参阅https://developer.mozilla.org/en/docs/Web/HTML/Element/a

上的href

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