反応する親コンポーネントのデータを復習する

Question

私は依然として反応コンポーネントのライフサイクルとどこで呼び出すべきかの把握を試みています。親メソッドにバインドされている子コンポーネントのアクションに基づいて、2つの状態要素を更新する必要がある次のコードがあります。これを行う最善の方法は何ですか？私は本質的にすべての私のデータ操作とロジックを親/コンテナにできるだけ置くことに固執しようとしています。

axios呼び出しのURLにUncaught TypeError: Cannot read property 'state' of undefined(…) というエラーが表示されます。私はエラーに対処する方法とこれを行うための最善の方法を知りたい。選択した年が変更されたときに、どこでデータを再取得する必要がありますか？

import React from 'react'; 
import axios from 'axios'; 
import MonthView from './MonthView.js'; 


class MonthViewContainer extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: [], 
     selectedYear: 2016 
    } 

    this.handleAddYear = this.handleAddYear.bind(this); 

    this.handleSubtractYear = this.handleSubtractYear.bind(this); 

    } 

    componentDidMount() { 

    var self = this; 
    var defaultYear = this.state.selectedYear 

     axios.get('http://localhost:3001/api/transfilter?year=' + defaultYear + '&grouping=2') 
     .then(function (response) { 
     console.log(response); 
     self.setState({data: response.data}); 
     }) 
     .catch(function (error) { 
     console.log(error); 
     }); 

    } 

    render() { 
    return <MonthView data={this.state.data} selectedYear={this.state.selectedYear} onAddYear={this.handleAddYear} onSubtractYear={this.handleSubtractYear} />; 
    } 

    handleAddYear() { 
    const newyear = this.state.selectedYear + 1; 
    this.setState({selectedYear: newyear}, function() { 
     console.log(this.state.selectedYear); 
    }); 
    getTransactions(); 

    } 

    handleSubtractYear() { 
    const newyear = this.state.selectedYear - 1; 
    this.setState({selectedYear: newyear}, function() { 
     console.log(this.state.selectedYear); 
    }); 
    getTransactions(); 
    } 
} 

function getTransactions(){  
    var self = this; 
    axios.get('http://localhost:3001/api/transfilter?year=' + this.state.selectedYear + '&grouping=2') 
    .then(function (response) { 
    console.log(response); 
    self.setState({data: response.data}); 
    }) 
    .catch(function (error) { 
    console.log(error); 
    }); 

} 

export default MonthViewContainer; 

Answer 1

getTransactionsあなたMonthViewContainerクラスのメンバ関数ではない、とあなたはundefinedエラーを取得している理由です：thisは、関数のスコープ内に存在しません。

MonthViewのコードを提供していないため、そこにあるものが正しいかどうかを確認することはできません。しかし、コンテナコンポーネントを "高次コンポーネント"にしようとすることで、あなたはすでに正しいアイデアを持っています。あなたがコーディングのリアクションコンポーネントで十分に練習していないように見えて、ちょっとした誤りがありました。

最初に、getTransactions()をクラス定義内に入れて、メンバー関数にしてthis.getTransactions()をhandleAddYear()から呼び出してみてください。コンストラクタ内の他のイベントハンドラの場合と同じように、これをgetTransactionsにバインドする必要があります。

また、ではなくsuper(props);に電話してください。

このパターンは、小規模なアプリケーションで使用することをお勧めします。州にアクセスする必要がある州と子供のコンポーネントの数が多くなると、flux patternを適用することをお勧めします。