React Native新手求助：构建时出现this.setState is not a function错误

嘿，刚上手React Native遇到这个问题太正常啦，别慌！咱们先拆解下问题根源：

你把this._proximityListener作为监听器传给Proximity.addListener时，这个函数的this上下文已经脱离了App组件实例——简单说就是，此时函数里的this压根找不到组件的setState方法，自然就报错了。

下面给你三种常用的解决办法，选一种顺手的用就行：

方法1：用箭头函数包裹监听器 #

在componentDidMount传递监听器时，用箭头函数把_proximityListener包起来，强制保留组件的this上下文：

type Props = {};
export default class App extends Component<Props> {
  // 先初始化state，避免setState时出现属性未定义的警告
  state = {
    proximity: false,
    distance: 0
  };

  componentDidMount(){
    // 箭头函数帮你锁定this指向组件实例
    Proximity.addListener((data) => this._proximityListener(data));
  }

  _proximityListener(data) {
    this.setState({
      proximity: data.proximity,
      distance: data.distance // Android-only
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}> 00 </Text>
        ...
      </View>
    );
  }
}

方法2：在构造函数中手动绑定this #

在组件构造函数里，把_proximityListener的this绑定到组件实例上，这样不管在哪调用这个函数，this都不会跑偏：

type Props = {};
export default class App extends Component<Props> {
  constructor(props: Props) {
    super(props);
    this.state = {
      proximity: false,
      distance: 0
    };
    // 手动绑定，固定this指向
    this._proximityListener = this._proximityListener.bind(this);
  }

  componentDidMount(){
    Proximity.addListener(this._proximityListener);
  }

  _proximityListener(data) {
    this.setState({
      proximity: data.proximity,
      distance: data.distance // Android-only
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}> 00 </Text>
        ...
      </View>
    );
  }
}

方法3：用Class Fields语法（箭头函数定义方法） #

直接把_proximityListener定义成箭头函数形式的class field，箭头函数会自动捕获当前组件的this上下文，不用额外做绑定操作：

type Props = {};
export default class App extends Component<Props> {
  state = {
    proximity: false,
    distance: 0
  };

  componentDidMount(){
    Proximity.addListener(this._proximityListener);
  }

  // 箭头函数定义方法，自动绑定组件的this
  _proximityListener = (data) => {
    this.setState({
      proximity: data.proximity,
      distance: data.distance // Android-only
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}> 00 </Text>
        ...
      </View>
    );
  }
}

小提醒：记得一定要初始化组件的state哦，不然第一次触发setState时可能会出现不必要的警告~

内容的提问来源于stack exchange，提问作者User_3535