0

To run the tutorial properly, I was suppose to start up the server and type: 127.0.0.1:3000 into the url bar to access it. (Let's call this Method 1)

Method 2: However, I thought I could just simply drag and drop the index.html file into the browser and play with it locally.(I started the server simply for grabbing the json file) During this process, I discovered a few differences between these two methods:

  1. In the "Updating state" section, I got an error "Cannot read property 'map' of undefined", the solution was to wrap the following code with an if statement:

    if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}

    But if I use Method 1, the if block is not needed. Why?

  2. In the "Optimization: optimistic updates" section, when I use method 2, after a post has been inserted manually, the webpage will refresh. Like this: click on post -> post inserted manually and appear on the page -> page refresh

But If I use method 1, the page does not refresh after the post has been inserted. Why?

Thank you!

Update: Thanks to Hannes for being so patient. The problem was that I had a typo:

getInitialState: function() {
    return {date: []};    <--- it should be data!!!
},
Community
  • 1
  • 1
Cheng
  • 16,824
  • 23
  • 74
  • 104

1 Answers1

2

After having this discussion we concluded that it was simply a typo in the code. To add some explanation:

this.props.data is what is being passed from the parent component as the "data attribute/prop" on the following line:

<CommentList data={this.state.data} />

Since there was a type in the getInitialState method, this.state.data was undefined.

getInitialState: function() { 
    return {date: []}; 
}

should of course have been

getInitialState: function() { 
    return {data: []}; 
}
Community
  • 1
  • 1
Hannes Johansson
  • 1,794
  • 2
  • 15
  • 28
  • Server is running in both cases. The only difference is the url, method 1's url: `127.0.0.1:3000`, method 2's url: `file://localhost/Users/cheng/Dev/react-test/index.html`. It looks like you assume the server wasn't running in both cases. – Cheng Jul 15 '15 at 13:24
  • Still, though, if you inspect your ajax requests in the browser, they don't return, correct? Regardless of the cause, if the ajax calls don't successfully return some data, everything in the answer is still relevant. – Hannes Johansson Jul 15 '15 at 13:34
  • You are right that the ajax didn't get triggered. But why didn't it get triggered? It looks like the ajax methoed didn't get triggered at all. It is definitely not an cross-origin-xmlrequest issue which is often seen with file:// – Cheng Jul 15 '15 at 13:40
  • How come you conclude it's definitely not that? I think that's exactly what it is. Chrome at least doesn't send the request in that case. Check http://stackoverflow.com/questions/5469440/jquery-ajax-request-from-local-filesystem-windows-file – Hannes Johansson Jul 15 '15 at 13:49
  • Either way, that's a completely different question. The answer to the question you actually ask here is that the ajax success callback isn't called, which is where `this.state.data` is set, except in the `getInitialState` method where it should have been initialized to an empty array. As I said in my answer. – Hannes Johansson Jul 15 '15 at 13:53
  • Ok, I accept your answer. But let me tell you why I am so sure that this is not a COR issue. Because I modified server.py `return Response(json.dumps(comments), mimetype='application/json', headers={'Cache-Control': 'no-cache', 'Access-Control-Allow-Origin': '*'})` Note I added `Access-Control-Allow-Origin` in the end. Also, to ensure this fix actually worked, I commented out `` inside the render function of CommentBox so that the .map function will not be called. Then I started the server and I can see the ajax call get through. – Cheng Jul 15 '15 at 14:02
  • Also, I do have this code `getInitialState: function() { return {date: []}; }, – Cheng Jul 15 '15 at 14:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/83337/discussion-between-hannes-johansson-and-cheng). – Hannes Johansson Jul 15 '15 at 14:06