Typeerror: this.props.data.map ist keine Funktion

Als Anfänger habe ich versucht, meine erste Reaktion Anwendung nach dem Tutorial zu erstellen: https://facebook.github.io/react/docs/tutorial.html Typeerror: this.props.data.map ist keine Funktion

Mein Server bei http://localhost:3000 ausgeführt wurde, nachdem der Befehl ausgeführt wird: perl-Server .pl

Dieser Fehler wurde (auf FireBug gesehen): Typeerror: this.props.data.map keine Funktion meine

Hier Code

Datei ist: index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Tutorial</title> 
    <!-- Not present in the tutorial. Just for basic styling. --> 
    <link rel="stylesheet" href="css/base.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 

    <script type="text/babel"> 

    var Comment = React.createClass({ 

     rawMarkup: function() { 
    var md = new Remarkable(); 
    var rawMarkup = md.render(this.props.children.toString()); 
    return { __html: rawMarkup }; 
    }, 

     render: function() { 
     return (
      <div className="comment"> 
      <h2 className="commentAuthor"> 
       {this.props.author} 
      </h2> 
      {this.props.children} 
      </div> 
     ); 
     } 
    }); 

    var CommentBox = React.createClass 
    ({ 
     loadCommentsFromServer: function() 
     {    
      $.ajax({ 
       url: this.props.url, 
       dataType: 'json', 
       cache: false, 
       success: function(data) { 
       this.setState({data: data}); 
       }.bind(this), 
       error: function(xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
       }.bind(this) 
      }); 
      }, 

      handleCommentSubmit: function(comment){ 

      var comments = this.state.data; 
      // Optimistically set an id on the new comment. It will be replaced by an 
      // id generated by the server. In a production application you would likely 
      // not use Date.now() for this and would have a more robust system in place. 
      comment.id = Date.now(); 
      var newComments = comments.concat([comment]); 
      this.setState({data: newComments}); 

      $.ajax({ 
       url: this.props.url, 
       dataType: 'json', 
       type: 'POST', 
       data: comment, 
       success: function(data) { 
       this.setState({data: data}); 
       }.bind(this), 
       error: function(xhr, status, err) { 
       this.setState({data: comments}); 
       console.error(this.props.url, status, err.toString()); 
       }.bind(this) 
      }); 
      }, 

     getInitialState: function(){ 
      return {data: []}; 
     }, 

     componentDidMount: function() 
     { 
      this.loadCommentsFromServer(); 
      setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
     }, 

     render: function(){ 
      return (
       <div className="commentBox">    
       <h1>Comments</h1>  
       <CommentList data="{this.state.data}" /> 
       <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
       </div> 
      ); 
     } 
    }); 

    var CommentList = React.createClass({ 
     render: function() { 
     var commentNodes = this.props.data.map(function(comment) { 
      return (
      <Comment author={comment.author} key={comment.id}> 
       {comment.text} 
      </Comment> 
     ); 
     }); 
     return (
      <div className="commentList"> 
      {commentNodes} 
      </div> 
     ); 
     } 
    }); 

    var CommentForm = React.createClass 
    ({ 
     getInitialState: function() { 
      return {author: '', text: ''}; 
      }, 
      handleAuthorChange: function(e) { 
      //alert(e.target.value); 
      this.setState({author: e.target.value}); 
      }, 
      handleTextChange: function(e) { 
      //alert(e.target.value); 
      this.setState({text: e.target.value}); 
      }, 
      handleSubmit: function(e) { 
      e.preventDefault(); 
      var author = this.state.author.trim(); 
      var text = this.state.text.trim(); 
      if (!text || !author) { 
       return; 
      } 
      // TODO: send request to the server 
      this.props.onCommentSubmit({author: author, text: text}); 
      this.setState({author: '', text: ''}); 
      }, 
     render: function() 
     { 
      return (
       <form className="commentForm" onSubmit={this.handleSubmit}> 
        <input 
         type="text" 
         placeholder="Your name" 
         value={this.state.author} 
         onChange={this.handleAuthorChange} 
        /> 
        <input 
         type="text" 
         placeholder="Say something..." 
         value={this.state.text} 
         onChange={this.handleTextChange} 
        /> 
        <input type="submit" value="Post" /> 
       </form> 
      ); 
     } 
    }); 



    ReactDOM.render(
     <CommentBox url="/api/comments" pollInterval={2000} />, 
     document.getElementById('content') 
    ); 

    </script> 
    </body> 
</html>

Datei: comments.json

[ 
    {"id": "1", "author": "Pete Hunt TEST", "text": "This is one comment"}, 
    {"id": "2", "author": "Jordan Walke TEST", "text": "This is *another* comment"} 
]

Quelle

2016-09-07 Xuan H

Auf Ausnahmen brechen und den Wert von 'this.props.data' untersuchen. –

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

this.state.data NICHT in doppelte Anführungszeichen sein sollte.

Der Fehler tritt auf, wenn this.props.data nicht definiert ist oder kein Array. Bevor Sie eine Map erstellen, geben Sie wie folgt einen Standardwert ein.

const data = this.props.data || []; 
data.map(...);

Quelle

2016-09-07 17:22:00 vijayst

das funktioniert !!! –

Typeerror: this.props.data.map ist keine Funktion

Antwort

Verwandte Themen