ReactJS/Javascript/Graphql/React-apollo：无法读取未定义的属性“加载”

Question

I am calling displayElements from the render function and getting this error: TypeError: Cannot read property 'loading' of undefined . Why is this error showing up? The reason I think this error is showing up is because here will be no results upon initial rendering. But when the submit button is click a query to the DB gets executed and I would like to display the results using the displayElements.

displayElements(){
        var data = this.props.getObjectsQuery;
        console.log(this.props);
        if(data.loading){
          return <option disabled>Loading...</option>;
        }else{
          return data.action.map(action => {
            return(<option key={action.action} value={action.timestamp}>{action.filename}</option>);

          })
        }
      }

Submit Button

handleSubmit = event => {
        event.preventDefault();

        console.log(this.state);
        this.setState({
          startTime: new Date(document.getElementById("startTime").value).valueOf(),//getElementById is a jQuery method
          endTime: new Date(document.getElementById("endTime").value).valueOf()
        }, () => {
          this.props.data.refetch({//Assign the inputvalues, which is the current state, to the variables after pressing the submit button
            startTime: this.state.startTime,
            endTime:this.state.endTime
          });
          console.log(this.state.startTime);
          console.log(this.state.endTime);
        });
      };

Answer 1

Write the conditon as if(data) and then write your code.

  displayElements(){
    var data = this.props.getObjectsQuery;
    console.log(this.props);
    if(data) {
      if(data.loading){
        return <option disabled>Loading...</option>;
      }else{
        return data.action.map(action => {
          return(<option key={action.action} value={action.timestamp}>{action.filename}</option>);
        })
      }
    }

  }