Ошибка: не удается прочитать свойство 'props' неопределенного значения, вызывается родительский метод в дочернем элементе

Я визуализирую диаграмму в родительском компоненте. Когда я пытаюсь получить доступ к this.props.onUpdate () в дочернем компоненте, появляется сообщение об ошибке «Не удается прочитать свойство 'props' of undefined»
мне нужно обновить данные диаграммы в соответствии с временем начала и окончания. Дочерний компонент

var React = require('React');
var ReactDOM = require('ReactDOM');
var Chart = require('react-google-charts').Chart;
var $ = require('jquery');

var LChart = React.createClass({
   getInitialState: function() {
       return {
            rows: [],            
               }
        },
    componentWillMount: function () {
        var _this = this;
            var request = function () {
                this.props.onUpdate();
                $.post("/url" ,{'start':this.props.sTime, 'end':this.props.eTime }, function (result) { 

                    _this.setState({
                        rows: result.data
                    });
                });
               setTimeout(request, 10000);
            };
         request();
        },
    render: function() {
        return (
            <div id="chart_widget" >
                <Chart chartType="LineChart"
                   rows={this.state.rows}
                   columns={this.props.columns}
                   options={this.props.options}
                   width={this.props.width}
                   height={this.props.height} />
            </div>
        );
      }
    });
module.exports = LChart;

родительский компонент:

var React = require('React');
var LChart = require('LChart');

var Parent = React.createClass({    

 getInitialState: function()
  {
      return ({
          columns: [
                {
                    'type': 'datetime',
                    'label' : 'Date'
                },
                {
                    'type' : 'number',
                    'label' : Val
                }
                ],
          options: 
                {
                    hAxis:{format:'HH:mm'},
                },
          date: new Date(),
          eTime: date.getTime(),
          sTime: eTime - (60000 * 5),
      });
  },
  onUpdate: function(val){
      this.setState({
          date: new Date(),
          eTime: date.getTime(),
          sTime: eTime - (60000 * range),
      });
  },
render: function () {
    return (
            <div >
                <LChart width="500px" height="400px" 
                             date={this.state.date} 
                             sTime={this.state.sTime} 
                             eTime={this.state.eTime}
                             columns={this.state.columns}
                             options={this.state.options}
                             onUpdate={this.onUpdate}/>
            </div>  
        );
    }
}); 
module.exports = Parent;

person user2194838    schedule 04.11.2016    source источник
comment
Вы хотели использовать _this.props.onUpdate() с подчеркиванием?   -  person Wander Nauta    schedule 05.11.2016
comment
this не может быть неопределенным ни в каком сценарии.   -  person plalx    schedule 05.11.2016
comment
Вы можете сказать нам, где происходит ошибка?   -  person Andrew Li    schedule 05.11.2016
comment
@Andrew Ошибка в дочернем компоненте в строке 15 this.props.onUpdate ()   -  person user2194838    schedule 05.11.2016
comment
@WanderNauta Когда я использую _this.props.onUpdate (). Эта ошибка исчезла. Я получаю еще одну ошибку. В родительском компоненте дата его произнесения не определена. Мы не можем использовать такую ​​дату в функции setState, где endTime будет рассчитываться на основе даты. this.setState ({date: new Date (), eTime: date.getTime (), sTime: eTime - (60000 * диапазон),});   -  person user2194838    schedule 05.11.2016
comment
@ user2194838 Что касается проблемы с setState, объявите новую дату вне вызова setState: onUpdate: function(val){ var date = new Date(); this.setState({ eTime: date.getTime(), sTime: eTime - (60000 * range)}); }   -  person Pineda    schedule 05.11.2016


Ответы (1)


Вы должны привязать свой request к LChart компонент.

var LChart = React.createClass({
   getInitialState: function() {
       return {
            rows: [],            
               }
        },
    componentWillMount: function () {
        var _this = this;
            var request = function () {
                this.props.onUpdate();
                $.post("/url" ,{'start':this.props.sTime, 'end':this.props.eTime }, function (result) { 

                    _this.setState({
                        rows: result.data
                    });
                });
               setTimeout(request, 10000);
            };
         request = request.bind(this);
         request();
        },
    render: function() {
        return (
            <div id="chart_widget" >
                <Chart chartType="LineChart"
                   rows={this.state.rows}
                   columns={this.props.columns}
                   options={this.props.options}
                   width={this.props.width}
                   height={this.props.height} />
            </div>
        );
      }
});

Кроме того, в родительских компонентах объявите new Date вне вызова setState.

person Jason Xu    schedule 05.11.2016