时间戳

首页 > 解决方案 > React 组件内的递归函数 TypeError: * is not a function

javascript - React 组件内的递归函数 TypeError: * is not a function

问题描述

我正在尝试在 React 组件中编写递归函数，但是当我调用它时出现错误：

TypeError: this.loadFromStorage is not a function

这是我的代码：

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()
...

标签： javascriptreactjs

解决方案

似乎问题是，您没有使用箭头函数进行回调

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

应该

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

因为匿名函数默认情况下总是全局（窗口）。虽然箭头函数总是从声明的地方使用 this （所以在这种情况下它将是你的组件），对于 loadFromStorage 本身也是如此，它是箭头函数，在内部它在构造函数内部运行，在实际构造函数代码之前。

推荐阅读