Recursive function inside React component TypeError: * is not a function

Question

I'm trying to write a recursive function inside a React component but when I call it I get the error:

TypeError: this.loadFromStorage is not a function

This is my code:

class Availability extends Component {
    state = { availability: [] }
    componentDidMount() {
      this.getAvailability();
    }

    loadFromStorage = () => {
      let data = sessionStorage.getItem(this.props.manufacturer);
      if(data) {
        let availability = JSON.parse(data);
        this.setState({availability});
      } else {
        setTimeout(function() { this.loadFromStorage(); }, 200);
      }
    }

    getAvailability = () => {
    // calls this.loadFromStorage()
...

score 1 · Accepted Answer · answered Jan 06 '21 at 13:51

It seems the issue is, that you are not using arrow functions for callbacks

        setTimeout(function() { this.loadFromStorage(); }, 200);

should be

        setTimeout(() => this.loadFromStorage(), 200);

as anonymous function has always global (window) as this by default. While arrow functions always uses this from place of declaration (So it would be your component in the case), same for loadFromStorage itself, which is arrow function, internally it runs inside constructor, before actual constructor code.

Thank you, that solved it. I didn't realise there was a difference between those two syntaxes. — General Gravicius, Jan 06 '21 at 13:55

Recursive function inside React component TypeError: * is not a function

1 Answers1