React Native技术问题：this.state未定义，附相关组件代码

嘿，我看到你在开发React Native应用时碰到了this.state未定义的问题，这在类组件开发里是挺常见的坑，我给你梳理下常见原因和解决办法，应该能帮到你：

一、类组件未正确继承React.Component #

从你贴的代码来看，只导入了React但没让组件继承React.Component——类组件必须继承这个基类才能使用state和生命周期方法哦。你可以改成这样：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { PermissionsAndroid } from "react-native";
import SmsAndroid from 'react-native-get-sms-android';

// 让组件继承Component
class SmsReader extends Component {
  // 构造函数里初始化state
  constructor(props) {
    super(props);
    this.state = {
      smsList: [], // 用来存短信数据的state字段
      isLoading: false
    };
  }

  // 获取短信的方法，用箭头函数自动绑定this
  fetchSms = async () => {
    this.setState({ isLoading: true });
    // 先请求读取短信权限
    const permissionGranted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_SMS,
      {
        title: "读取短信权限申请",
        message: "应用需要读取你的收件箱短信来展示内容",
        buttonNegative: "取消",
        buttonPositive: "允许"
      }
    );

    if (permissionGranted === PermissionsAndroid.RESULTS.GRANTED) {
      const filter = {
        box: 'inbox',
        read: 1
      };

      SmsAndroid.list(JSON.stringify(filter), 
        (error) => {
          console.error("获取短信失败:", error);
          this.setState({ isLoading: false });
        }, 
        (count, smsData) => {
          console.log("找到", count, "条已读短信");
          const parsedSms = JSON.parse(smsData);
          // 更新state
          this.setState({ smsList: parsedSms, isLoading: false });
        }
      );
    } else {
      console.log("用户拒绝了短信读取权限");
      this.setState({ isLoading: false });
    }
  };

  // 组件挂载后调用获取短信方法
  componentDidMount() {
    this.fetchSms();
  }

  render() {
    const { smsList, isLoading } = this.state;
    return (
      <View style={styles.container}>
        {isLoading ? (
          <Text>正在加载短信...</Text>
        ) : (
          <Text>已读短信数量: {smsList.length}</Text>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20
  }
});

export default SmsReader;

二、方法中的this绑定失效 #

如果你的自定义方法没有正确绑定组件实例的this，调用时this会变成undefined，自然访问不到this.state。解决方式有三种：

• 用箭头函数定义方法：就像上面的fetchSms = async () => {}，箭头函数会自动捕获当前上下文的this，不用手动绑定
• 在构造函数里手动绑定：

  constructor(props) {
    super(props);
    this.state = { ... };
    // 手动绑定this
    this.fetchSms = this.fetchSms.bind(this);
  }
  

• 调用方法时用箭头函数包裹：比如在按钮点击事件里写onPress={() => this.fetchSms()}

三、误用函数组件的this.state #

如果你写的是函数组件，那根本不能用this.state，得用React的useState钩子来管理状态。给你个函数组件的版本参考：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { PermissionsAndroid } from "react-native";
import SmsAndroid from 'react-native-get-sms-android';

const SmsReader = () => {
  // 用useState定义状态
  const [smsList, setSmsList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const fetchSms = async () => {
    setIsLoading(true);
    const permissionGranted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_SMS,
      {
        title: "读取短信权限申请",
        message: "应用需要读取你的收件箱短信来展示内容",
        buttonNegative: "取消",
        buttonPositive: "允许"
      }
    );

    if (permissionGranted === PermissionsAndroid.RESULTS.GRANTED) {
      const filter = {
        box: 'inbox',
        read: 1
      };

      SmsAndroid.list(JSON.stringify(filter), 
        (error) => {
          console.error("获取短信失败:", error);
          setIsLoading(false);
        }, 
        (count, smsData) => {
          const parsedSms = JSON.parse(smsData);
          setSmsList(parsedSms);
          setIsLoading(false);
        }
      );
    } else {
      console.log("用户拒绝了短信读取权限");
      setIsLoading(false);
    }
  };

  // 相当于类组件的componentDidMount
  useEffect(() => {
    fetchSms();
  }, []);

  return (
    <View style={styles.container}>
      {isLoading ? (
        <Text>正在加载短信...</Text>
      ) : (
        <Text>已读短信数量: {smsList.length}</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20
  }
});

export default SmsReader;

最后总结下 #

先确认你的组件类型：如果是类组件，必须继承React.Component，同时确保方法的this绑定正确；如果是函数组件，直接用useState代替this.state就行。从你提供的代码片段来看，大概率是类组件没继承基类或者方法没绑定this的问题，按上面的方式调整应该就能解决啦。

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