Question

我仍然试图掌握反应组件的生命周期以及应该在何时/何时进行调用。我有以下代码，我需要根据绑定到父方法的子组件操作更新两个状态元素。做这个的最好方式是什么？我本质上是试图尽可能地将所有数据操作和逻辑放在父/容器中。

我收到错误：Uncaught TypeError: Cannot read property 'state' of undefined(…) 在axios电话的网址中。我想知道如何解决错误，以及执行此操作的最佳方法是什么。在选定的年份发生变化时，我应该在哪里拨打电话来重新获取数据？

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没有＆＃ 39; t存在于函数的范围内。

您没有为MonthView提供代码，因此无法检查其中的内容是否正确。但是，您已经有了正确的想法，尝试使容器组件成为高级组件＆＃34;。看起来你似乎还没有使用React组件进行编码，只是犯了一个小错误。

首先，您可以尝试将getTransactions()放在类定义中以使其成为成员函数，然后从this.getTransactions()调用handleAddYear()。您需要将此绑定到getTransactions，就像您在构造函数中为其他事件处理程序所做的那样。

另外，请致电super(props);而不是super()。

另请注意，建议您将此描述的模式用于较小的应用程序。当需要访问州的州和子组件数量变大时，建议您应用flux pattern。

反应重新获取父组件数据

1 个答案: