反應重新獲取父組件數據

Question

我仍然試圖掌握反應組件生命週期以及何時/何時應該進行調用。我有以下代碼，我需要更新兩個狀態元素，基於綁定到父方法的子組件操作。做這個的最好方式是什麼？我基本上試圖堅持儘可能地將所有數據操作和邏輯放在父容器/容器中。

我在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的代碼，所以無法檢查其中是否有正確的東西。但是，您已經有了正確的想法，試圖將容器組件設置爲「高階組件」。看起來你編碼React組件的時候還不夠練習，只是做了一個小小的錯誤。

因此，首先，您可以嘗試將getTransactions()放入類定義中，使其成爲成員函數，然後從handleAddYear()調用this.getTransactions()。您需要將其綁定到getTransactions，就像您在構造函數中爲其他事件處理程序所做的那樣。

此外，請致電super(props);而不僅僅是super()。

請注意，您所描述的這種模式推薦用於較小的應用程序。當需要訪問狀態的狀態和子組件的數量變大時，建議您應用flux pattern。