3

I have built a simple service to compose a series of tweets, http://tweetsmart.in using React and Flux. I am facing a weird error where the page reloads when the user signs in and clicks on the tweet button for the first time.

If the tweet button is clicked the second time things work as expected. It is only the first time after logging in that I have noticed this behavior. The tweet button is just an anchor tag, so it's not the default submit behavior of button which is causing this.

Steps to repro the bug:

  1. Goto http://tweetsmart.in/popup.html
  2. Sign in using twitter
  3. After signing in write something in the Text box.
  4. Click on the Tweet button to tweet it.

You will find that the page reloads and the tweet fails, though I am not sure which happens first. When I open Chrome developer tools and look at the Network tab, I find that the api call to tweet gets cancelled and the next thing that happens is that the page reloads. It seems to me page reload caused the api call to cancel.

Screenshot of Network tab from Chrome Developer Tools

However, I have put some logging statements in my code to debug and I find an anomaly. After clicking on the Tweet button, an Action is dispatched which queues the Tweets and then if there are any queued Tweets, then a subsequent Action is dispatched to tweet the first queued Tweet. This results in the Api call tweetsmart, which is wrapped in a Promise and only when the Promise succeeds or fails further Actions are dispatched to the Store.

However, from the log statements on the console, I find that the componentDidUpdate of my main React component is called before the page reloads. Dominic Decoco is logged if there is an unsuccessful tweet. See https://github.com/singhshashi/tweetsmart/blob/master/js/components/TweetSmartApp.react.js

Screenshot of Console tab from Chrome Dev Tools

As I am not dispatching any actions to the store, I am not sure what is causing the react component to update. Is this happening simply because of the page reload? Is this causing the page reload?

============Update 1========

The React component updates because the api call is cancelled and thus the TWEET_FAILED action is dispatched.I think the reason that the api call is cancelled is because a reload is triggered. The question is what is triggering the page to reload?

shashi
  • 4,616
  • 9
  • 50
  • 77

2 Answers2

2

Ok so I found the issue.

The Tweet button was an anchor tag without a href attribute and as a result its href was pointing to current page url causing the page to reload whenever it was clicked.

While I am not sure if this is intended behavior, I will investigate that further and post another question if I find anything out of the ordinary. I suspect this may be some bug in how jsx is translated into html as in html5 one can have anchor tags without href attribute. See href at https://developer.mozilla.org/en/docs/Web/HTML/Element/a

My solution for now was to change the anchor tag to a button tag with type=button.

shashi
  • 4,616
  • 9
  • 50
  • 77
  • You can also add an `onClick` function that takes an `event` paremeter, and call `event.preventDefault()` to keep the link from changing the URL at all. – Michelle Tilley Dec 15 '15 at 23:27
1

When your tweet fails you call updateStateOnTweetFailed which will preform the following dispatch: AppDispatcher.dispatch({actionType:TweetSmartActions.TWEET_FAILURE});. Your store listens for this actionType and will emit a change which causes you re-render and thus your react component updates itself. The page reload on the other hand I am not sure. It will be worth checking if your are calling a page reload as a result of this action.

Mike D
  • 252
  • 1
  • 9
  • This is helpful. I was assuming that the api gets cancelled due to reload of page and thus updateStateOnTweetFailed was not called. But that is not true and it is being called. This gives some direction to investigate further. Thanks! – shashi Dec 15 '15 at 18:49