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> 
    ); 
    } 
}