undefined 不是函数（评估 'this.setstate( [重复]答案

【问题标题】：undefined is not a function (evaluating 'this.setstate( [duplicate]undefined 不是函数（评估 'this.setstate( [重复]
【发布时间】：2018-09-16 14:52:44
【问题描述】：

我是 React Native 初学者。我已经使用“axios”npm 包为 API 中的 fech 数据编写了代码。当我运行时运行正常，但是当它获取数据时抛出错误。

undefined 不是函数（评估 'this.setstate(

我怀疑这个绑定有问题，但我不知道如何修复它。请帮我解决这个错误。

下面是我的代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ListView} from 'react-native';
import axios from 'axios';

export default class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      isolate: true,
      movies: []
    }

  }

  componentWillMount(){
    axios.get('https://facebook.github.io/react-native/movies.json')
    .then(function (response){
      var moviesList = new ListView.DataSource({
        rowHasChanged: (r1,r2) => r1 !== r2
      });
      this.setState({
        isolate: false,
        movies: moviesList.cloneWithRows(response.data.movies)
      });
    }).catch(function(error){
alert(error);
    });
  }
  render() {
if(this.state.isolate){
  return (<View>

    <Text>Loading....</Text>
  </View>);
}

    return (
      <View style={styles.container}>
        <ListView 
        dataSource={this.state.movies}
        renderRow={
          (rowData) => <Text> {rowData.title} </Text>
        }
        >
        </ListView>
      </View>
    );
  }
}

提前致谢。

【问题讨论】：

then 回调应该是一个箭头来获得词法 this，

标签： reactjs react-native axios

【解决方案1】：

您应该使用箭头函数作为回调：

axios.get('https://facebook.github.io/react-native/movies.json')
    .then(response => {
        // ...
    }

如需了解更多详情，请阅读How to access the correct `this` inside a callback? 以了解this 的工作原理。

【讨论】：

【解决方案2】：

您的 this 上下文在来自 ajax 调用的 then 内是未知的。要么使用箭头函数传递this 的上下文，要么在ajax 调用之前定义一个变量var self = this 并在回调中使用它，如self.setState...

componentWillMount(){
    axios.get('https://facebook.github.io/react-native/movies.json')
    .then((response) =>{
      var moviesList = new ListView.DataSource({
        rowHasChanged: (r1,r2) => r1 !== r2
      });
      this.setState({
        isolate: false,
        movies: moviesList.cloneWithRows(response.data.movies)
      });
    }).catch(function(error){
alert(error);
    });
  }

【讨论】：

【解决方案3】：

关于您的错误，这是因为您试图在错误的上下文中访问 this。一种解决方案是使用箭头函数将正确的上下文绑定到 this 关键字。
我还建议您在 componentDidMount 生命周期方法中获取数据，使其变为：

componentDidMount() {
  axios.get('https://facebook.github.io/react-native/movies.json')
    .then(response => {
      var moviesList = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      });
      this.setState({
        isolate: false,
        movies: moviesList.cloneWithRows(response.data.movies)
      });
    }).catch(function(error) {
      alert(error);
    });
}

【讨论】：