chat.js：89未捕獲的ReferenceError：綁定未定義（...）在陣營JS

Question

你好我是JS反應初學者，使一個項目在運行我的代碼在控制檯中有一個錯誤

chat.js:89 Uncaught ReferenceError: bind is not defined(…)

我無法找到錯誤，請幫助我。

class CommentBox extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = {data: []} 
    } 
    loadCommentsFromServer() { 
    $.ajax({ 
     url: 'api/get-latest-comments.php', 
     dataType: 'json', 
     cache: false, 
     success(data) { 
     bind(this.setState({data: data})) 
     }, 
     error(xhr, status, err) { 
     bind(console.error(this.props.url, status, err.toString())) 
     } 
    }); 
    } 

    handleCommentSubmit(comment) { 
    // TODO: submit to the server and refresh the list 
     var comments = this.state.data; 
     var newComments = comments.concat([comment]); 
     this.setState({data: newComments}); 
     $.ajax({ 
      url: 'api/save-comment.php', 
      dataType: 'json', 
      type: 'POST', 
      data: comment, 
      success(data) { 
      bind(this.setState({data: data})) 
      }, 
      error(xhr, status, err) { 
      bind(console.error(this.props.url, status, err.toString())) 
      } 
     }); 
    } 
    componentDidMount() { 
    this.loadCommentsFromServer(); 
    setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
    } 

    render() { 
    return (
     <div className="commentBox"> 

     <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
     <div className="page-header"> 
      <h1>Comments</h1> 
     </div> 
     <CommentList data={this.state.data} /> 
     </div> 
    ); 
    } 
} 

舊的index.php的腳本

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 

新的index.php的腳本

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> 

Answer 1

您使用bind()是錯誤的方式。您需要將ajax中的success和error函數綁定到正確的上下文，而不是函數中的數據。使用綁定的

success: function(data) { 
    this.setState({data: data}) 
}.bind(this), 

代碼：

class CommentBox extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = {data: []} 
    } 
    loadCommentsFromServer =() => { 
    $.ajax({ 
     url: 'api/get-latest-comments.php', 
     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 = (comment) => { 
    // TODO: submit to the server and refresh the list 
     var comments = this.state.data; 
     var newComments = comments.concat([comment]); 
     this.setState({data: newComments}); 
     $.ajax({ 
      url: 'api/save-comment.php', 
      dataType: 'json', 
      type: 'POST', 
      data: comment, 
      success: function(data) { 
      this.setState({data: data}) 
      }.bind(this), 
      error: function(xhr, status, err) { 
      console.error(this.props.url, status, err.toString()) 
      }.bind(this) 
     }); 
    } 
    componentDidMount() { 
    this.loadCommentsFromServer(); 
    setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
    } 

    render() { 
    return (
     <div className="commentBox"> 

     <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
     <div className="page-header"> 
      <h1>Comments</h1> 
     </div> 
     <CommentList data={this.state.data} /> 
     </div> 
    ); 
    } 
}