React：子コンポーネント内で親コンポーネントの 'this.state'が定義されていません。

Question

オンラインショップのReactJSで注文フォームを開発中です。今、私はブラウザのコンソールで 'this.state'がコンポーネント関数の中で定義されていないようなメッセージを受け取りました...何が間違っていますか？どうすれば問題を回避できますか？私は公式文書では何の手がかりも見つけられませんでした。

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

どうすれば変更できますか？何が問題ですか？

Answer 1

OrderForm（親クラス）で定義されたaddTotal（）メソッドをService（子クラス）から呼び出します。 addTotalには、親クラスの「状態」へのアクセス権が必要です。だから、.bind（この）で行を追加することによって）（コンストラクタのためにあなたのコードのいずれか を変更しようとしている。

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

またはserviceList（）メソッドのための（.MAP後に（この）.bindを追加することにより、 ）のjavascriptメソッドです。 、以下を参照してください：

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

addTotalが呼び出されると、これはOrderFormコンポーネントのコンテキストを指すものではありません。あなたは、コンストラクタでこのようaddTotal機能をバインドする必要があります。

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

あなたaddTotal関数は次のようになります。

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

として

DOCSあたりあなたが書くべきではありません

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

previousStateとpreviousPropsを引数として受け取るコールバック関数を受け付けるsetStateの第2の形式を使用する必要があります。

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

同様の変化は、はclickHandler機能に必要とされます。