Задать данные родительского компонента refetch

Question

Я все еще пытаюсь понять жизненный цикл реагирующего компонента и где/когда нужно делать вызовы. У меня есть следующий код, где мне нужно обновить два элемента состояния на основе действия дочернего компонента, связанного с родительским методом. Каков наилучший способ сделать это? Я по существу стараюсь придерживаться всех моих манипуляций с данными и логики в родительском/контейнере как можно больше.

Я получаю сообщение об ошибке: Uncaught TypeError: Cannot read property 'state' of undefined(…) в адресе acios вызова. Я хочу знать, как устранить ошибку, а также то, что это лучший способ сделать это. Где я должен позвонить, чтобы обновить данные каждый раз, когда выбранный год изменен?

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() в определение класса, чтобы сделать его функцией-членом, а затем позвонить this.getTransactions() из handleAddYear(). Вам нужно будет привязать это к getTransactions, как вы уже сделали для других обработчиков событий в своем конструкторе.

Также звоните super(props);, а не только super().

Обратите внимание, что этот шаблон, который вы описываете, рекомендуется для использования в небольших приложениях. Когда число компонентов и компонентов, которые нуждаются в доступе к состоянию, увеличивается, вам рекомендуется применить flux pattern.