CODEWITHSUNDEEP
reactjs
stackoverflow_user
stackoverflow_user

Reputation: 289

Cannot read property then of undefined

i want to load some data without page refresh. To do so i poll for the data. However, in doing so i get console error "cannot read property then of undefined" and i get the output i expect. Still i want to get rid of this error from the console. I understand its throwing that error since no data is returned initially. But could someone help me with this...

Below is the code,

componentDidMount() {
    this.start_polling();
}

componentWillUnMount() {
    this.stop_polling();
}

start_polling = () => {
    if (!this.is_polling) {
        this.is_polling = true;
        this.poll();
    }
 };

 poll = () => {
     if (this.is_polling) {
         this.poll_timeout = setTimeout(() => {
             this.load_data()
                 .then(this.poll)
                 .catch(this.stop_polling);
         }, poll_interval_ms);
     }
 };

 stop_polling = () => {
    clearTimeout(this.poll_timeout);
    this.is_polling = false;
 };

 load_data = () => {
    const file_name = 'file.json';
    client.get_data_file(this.props.id, file_name, 'json')
        .then((request) => {
            const data = component_name.filter_data(request.response);
            const sorted_data = component_name.sort(data);
            this.data = sorted_data;
            this.setState({final_dat: [this.data]});
        })
        .catch((error) => {
          //something
        });
};

Upvotes: 0

Views: 678

Answers (1)

Anxo
Anxo

Reputation: 475

The problem is that load_data is not returning anything, but you're expecting it to return a promise, and doing .then() on the returned value. Just add a return on load_data and you're set:

load_data = () => {
    const file_name = 'file.json';
    return client.get_data_file(this.props.id, file_name, 'json')
        .then((request) => {
            const data = component_name.filter_data(request.response);
            const sorted_data = component_name.sort(data);
            this.data = sorted_data;
            this.setState({final_dat: [this.data]});
        })
        .catch((error) => {
          //something
        });
};

Of course, make sure that client.get_data_file also returns a promise correctly.

Upvotes: 1

Related Questions