是啥导致网页重新加载？

Posted 2023-02-22

【中文标题】是啥导致网页重新加载？

【英文标题】：What is causing the web page to reload?是什么导致网页重新加载？

【发布时间】：2016-03-20 16:11:42

【问题描述】：

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

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

重现错误的步骤：

转到http://tweetsmart.in/popup.html 使用推特登录 登录后在文本框中写一些东西。 单击“推文”按钮以推文。

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

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

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

由于我没有向 store 发送任何操作，我不确定是什么导致了 react 组件更新。这仅仅是因为页面重新加载而发生吗？这会导致页面重新加载吗？

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

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

【参考方案1】：

当您的推文失败时，您调用updateStateOnTweetFailed，它将执行以下调度：AppDispatcher.dispatch(actionType:TweetSmartActions.TWEET_FAILURE);。您的商店会侦听此 actionType 并将发出一个更改，导致您重新渲染，因此您的反应组件会自行更新。另一方面，我不确定页面重新加载。值得检查您是否由于此操作而调用页面重新加载。

【讨论】：

这很有帮助。我假设 api 由于重新加载页面而被取消，因此没有调用 updateStateOnTweetFailed。但这不是真的，它正在被调用。这为进一步研究提供了一些方向。谢谢！

【参考方案2】：

好的，我发现了问题。

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

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

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

【讨论】：

您还可以添加一个带有event 参数的onClick 函数，并调用event.preventDefault() 以防止链接更改URL。