React: 'this.state' der Elternkomponente ist in einer Kindkomponentenfunktion nicht definiert

Question

Ich entwickle ein Bestellformular in ReactJS für den Online-Shop. Jetzt bekomme ich die Meldung in der Browser Konsole wie 'this.state' ist undefined innerhalb einer Komponente Funktion ... Was ist los? Wie kann ich das Problem vermeiden? Ich habe keine Hinweise in der offiziellen Dokumentation gefunden.

class Service extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = {active:  false,} 
    } 
    clickHandler(){ 
     let active = !this.state.active; 
     this.setState({active: active}); 
     this.props.addTotal((active == true ? this.props.price : -this.props.price)); 
    } 
    render(){ 
     return(
      <p className={this.state.active ? 'active' : ''} onClick={() => this.clickHandler()}> 
       {this.props.name} <b>${this.props.price.toFixed(2)}</b> 
      </p> 
     ); 
    } 
}; 

class OrderForm extends React.Component { 
    constructor(){ 
     super(); 
     this.state = { total: 0,} 
    } 
    addTotal(price){ 
     this.setState({total: this.state.total + price}); 
    } 
    serviceList(){ 
     var self = this; 
     //Iteration with map method 
     const serviceMapIterator = this.props.services.map(function(item, i, arr){ 
       return (<Service key  = {i.toString()} 
            name = {item.name} 
            price = {item.price} 
            active = {item.active} 
            addTotal= {self.addTotal} > 
         </Service>); 
     }); 
     return serviceMapIterator; 
    } 
    render(){ 
     let service = this.serviceList(); 
     return(
      <div> 
       {service} 
       <p id={'total'}>Total <b>${this.state.total.toFixed(2)}</b></p> 
      </div> 
     ); 
    } 
}; 
var services = [ 
    { name: 'Web Development', price: 300 }, 
    { name: 'Design', price: 400 } 
]; 

Wie kann ich es ändern? Was ist das Problem?

Answer 1

Sie rufen die in OrderForm (übergeordnete Klasse) definierte Methode addTotal() aus Service (untergeordnete Klasse) auf. Sie müssen addTotal Zugriff auf "state" der Klasse der Eltern haben. So werden Sie Ihren Code entweder für Konstruktor() ändern, indem Sie eine Zeile mit .bind Zugabe (this):

constructor(){ 
     super(); 
     this.state = { total: 0,}; 
     this.addTotal = this.addTotal.bind(this); 
    } 

oder für Dienstliste() -Methode durch .bind Zugabe (this) nach dem .map () der Javascript-Methode. Bitte finden Sie unter:

serviceList(){ 
     var self = this; 
     //Iteration with map method 
     const serviceMapIterator = this.props.services.map(function(item, i, arr){ 
       return (<Service key  = {i.toString()} 
            name = {item.name} 
            price = {item.price} 
            active = {item.active} 
            addTotal= {self.addTotal} > 
         </Service>); 
     }.bind(this)); 
     return serviceMapIterator; 
    } 

Answer 2

Wenn addTotal genannt wird, ist dies nicht auf den Kontext bezieht sich der Orderform Komponente. Sie sollten addTotal Funktion wie diese im Konstruktor binden:

constructor() { 
    ... 
    this.addTotal = this.addTotal.bind(this) 
} 

Ihre addTotal Funktion wie folgt aussieht:

addTotal(price){ 
     this.setState({total: this.state.total + price}); 
} 

Per DOCS

Sie nicht

schreiben sollte

this.setState({total: this.state.total + price}); 

Sie sollten die zweite Form von setState verwenden, die eine Callback-Funktion akzeptiert, die previousState und previousProps als Argument erhält.

addTotal(price) { 
    this.setState((prevState, previousProps) => ({ 
    counter: prevState.total + price 
    })); 
} 

ähnliche Änderung wird in clickhandler Funktion erforderlich.