Neden this.props ReactJS kodumda tanımsız?

Question

React ve ES6'yı öğrenme yolunda, resmi eğitimi aldım ve ES6'yı uyumlu hale getirmek için etrafta dolaştım. İşte

CommentBox.js:23 Uncaught TypeError: Cannot read property 'url' of undefined

benim CommentBox dosya/kod edilir: Ajax talebin yerine gelince, aşağıdaki hatayı alıyorum

import React from 'react'; 
import CommentList from './CommentList.js'; 
import CommentForm from './CommentForm.js'; 

export default class CommentBox extends React.Component { 
    constructor(props) { 
    super(props); 
    console.log(this.props) 
    this.state = { 
     data: [] 
    } 
    } 

    loadCommentsFromServer() { 
    $.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(comment) { 
    let comments = this.state.data; 

    // Optimistically set id on the new comment. 
    // It will be replaced by an id generated by the server. 
    // In a production you would have a more robust system in place. 
    comment.id = Date.now(); 
    let 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) 
    }); 
    } 

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

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

hata loadCommentsFromServer üzerinde gerçekleşmesi

; this.props'un ne olduğunu bilmiyor gibi görünüyor. Bu referansınnumaralı bir sorun olduğunu düşündüm ve sorunu çözmek için yeni ES6 okları kullanması önerildiği similar question bulundu. Daha sonra denedim: loadCommentsFromServer =() => {}, ancak Browserify şikayet ediyor ve oluşturmuyor.

Answer 1

Bu çizgi, derdin:

setInterval(this.loadCommentsFromServer, this.props.pollInterval); 

Sen setInterval yöntemi loadCommentsFromServer geçiyoruz, ancak bu nedenle this artık bileşene bağlı olacaktır bağlam olmadan çağrılır (this pencereye bağlı olacaktır). Bunun yerine böyle bir şey yapmanız gerekir: sizin bileşeni monte edilmemiş olduğunda bunu temizlemek böylece

setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval); 
// OR... use a fat arrow, which preserves `this` context 
setInterval(() => this.loadCommentsFromServer(), this.props.pollInterval); 

Son olarak,, aralık id saklamalısınız:

componentDidMount() { 
    this.loadCommentsFromServer(); 
    this.intervalId = setInterval(this.loadCommentsFromServer, this.props.pollInterval); 
}, 

componentWillUnmount() { 
    clearInterval(this.intervalId); 
} 

Answer 2

I thought it was a this reference problem and googling around i found a similar stackoverflow question where they suggest to use new ES6 arrows to fix the issue. I try then to use: loadCommentsFromServer =() => {} but browserify complain and don't build :/

ES6 ok fonksiyonları olacak gerçekten problemini çöz. Yapılandırma hatası ES6'nın sınıf özelliklerini desteklememesi ve loadCommentsFromServer = bir sınıf özelliği başlatıcısıdır. ES7 class properties'u etkinleştirin ve bunu yapabilmeniz gerekir venumaralı telefonu aradığınızda el ile bind veya yeni yağ ok işlevinde geri çağrınızı sarmanıza gerek kalmadan sorunu çözecektir.