Question

我收到以下错误

// bundle.js：31367未捕获的TypeError：this.setState不是功能//

JSX：

  componentDidMount(){
    $.ajax({
        url:'http://intelligencevillage.wxtui.cn/index.php/Api/HomepageWebview/getHomepageData/area_id/5',
        dataType:'json',
        cache:false,
    }).done(function({data}){
        this.setState({
            lis1:[data.banner]
        })
    })
}

我理解它是某种绑定问题，但我不知道如何修复它。任何帮助表示赞赏。

Answer 1

问题在于功能执行范围。

componentDidMount(){
    $.ajax({
      ...
    }).done(function({data}){
        ///// HERE {this}
        // try console.log(this);
        // you will see there is no`setState`
        this.setState({
            lis1:[data.banner]
        })
    })
}

现在，只在函数内部done链中的函数this引用。

轻松修复：使用Fat Arror功能

componentDidMount(){
    $.ajax({
        url:'',
        dataType:'json',
        cache:false,
    }).done(({data}) => {
        this.setState({
            lis1:[data.banner]
        })
    })
}

Answer 2

问题在于，您的案例中的this并不代表正确的上下文。 .done()内的函数代表了一个单独的上下文，因此你可以

<强> 1 即可。在bind(this)之后添加.done()。

constructor(props){
    super(props);
    this.state={

        lis1:[],

    }

}
componentDidMount(){
    $.ajax({
        url:'',
        dataType:'json',
        cache:false,
    }).done(function({data}){
        this.setState({
            lis1:[data.banner]
        });
    }.bind(this));
}

2 或者您可以将this分配给单独的变量并使用它。

constructor(props){
    super(props);
    this.state={

        lis1:[],

    }

}
componentDidMount(){
    var self = this;
    $.ajax({
        url:'',
        dataType:'json',
        cache:false,
    }).done(function({data}){
        self.setState({
            lis1:[data.banner]
        })
    })
}

获取setState不是一个函数

2 个答案:

轻松修复：使用Fat Arror功能