是什麼導致網頁重新加載？

Question

我已經構建了一個簡單的服務來組成一系列推文，使用React和Flux的http://tweetsmart.in。我遇到了一個奇怪的錯誤，當用戶登錄並第一次點擊鳴叫按鈕時頁面會重新加載。

如果第二次按下tweet按鈕，按預期工作。這只是登錄後第一次發現這種行爲。推文按鈕只是一個錨標記，所以它不是導致這種情況的按鈕的默認提交行爲。

步驟來攝製的bug：

1. 轉到http://tweetsmart.in/popup.html
2. 登錄使用Twitter
3. 在文本框中寫的東西后簽收。
4. 點擊Tweet按鈕發推。

您會發現頁面重新加載並且推文失敗，但我不確定哪一個會先發生。當我打開Chrome開發人員工具並查看「網絡」標籤時，我發現對tweet的api調用被取消，接下來發生的是頁面重新加載。在我看來，頁面重新加載導致api調用取消。

不過，我已經把一些日誌語句在我的代碼調試，我覺得異常。點擊Tweet按鈕後，將派發一個Action，將Tweets排隊，然後如果有任何排隊的Tweets，則會分派一個後續Action以推送第一個排隊的Tweet。這會導致Api調用tweetsmart，它被封裝在一個Promise中，並且只有在Promise成功或失敗時纔會進一步將Actions分配給Store。

但是，從控制檯上的日誌語句中，我發現在重新加載頁面之前調用了我的主React組件的componentDidUpdate。如果有不成功的推文，Dominic Decoco會被記錄。見https://github.com/singhshashi/tweetsmart/blob/master/js/components/TweetSmartApp.react.js

因爲我不分派到商店的任何行動，我不知道是什麼原因造成的反應組件進行更新。這是否僅僅是因爲頁面重新加載？這是否導致頁面重新加載？

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

，因爲API調用被取消，因此TWEET_FAILED動作dispatched.I的想法做出反應組件更新api調用被取消的原因是因爲重新加載被觸發。問題是觸發頁面重新加載的是什麼？

Answer 1

當您的推文失敗時，請致電updateStateOnTweetFailed，這將執行以下調度：AppDispatcher.dispatch({actionType:TweetSmartActions.TWEET_FAILURE});。你的商店會監聽這個actionType並且會發出一個改變，這會導致你重新渲染，因此你的反應組件會自行更新。另一方面，頁面重新加載，我不確定。作爲此操作的結果，您是否值得檢查是否正在調用頁面重新加載。

Answer 2

好吧，所以我找到了問題。

Tweet按鈕是一個沒有href屬性的錨標籤，因此它的href指向當前頁面的url，導致頁面在被點擊時重新加載。

雖然我不確定這是否是有意的行爲，但我會進一步調查併發布另一個問題，如果我發現任何不尋常的東西。我懷疑這可能是如何將jsx轉換爲html的一些錯誤，如在html5中，可以具有不帶href屬性的錨標籤。請參閱href at https://developer.mozilla.org/en/docs/Web/HTML/Element/a

我現在的解決方案是將錨標記更改爲類型爲= button的按鈕標記。