React Native函数组件（Hooks）中如何调用类的方法？

先指出你原代码里的几个问题：

• Utils被定义成了React组件类，但它不需要渲染任何内容，完全没必要继承Component
• 你尝试调用sid.getSid()，但sid是你的state变量，不是Utils的实例，这是错误的
• getSid是异步函数，你没有处理异步逻辑，直接调用会拿到Promise而非实际值
• Utils中未导入AsyncStorage，运行会报错
• 代码里setSid(t)的t变量未定义

下面给出两种可行的解决方案：

方案一：将Utils改为普通类并实例化调用 #

先修改Utils.js，去掉React组件继承，补充AsyncStorage导入：

import AsyncStorage from '@react-native-async-storage/async-storage';

export default class Utils {
  async getSid() {
    try {
      const value = await AsyncStorage.getItem("sid");
      if (value !== null) {
        console.log("value second screen is:", value);
        return value;
      }
      return null; // 无值时返回null
    } catch (error) {
      console.error('获取sid失败:', error);
      return null;
    }
  }
}

然后在Userprofile组件中正确实例化并调用：

import React, { useEffect, useState} from 'react';
import { TextInput } from 'react-native-paper';
import { View, Text} from 'react-native';
import Utils from './Utils';

export default function Userprofile() {
  const [text, setText] = useState("");
  const [sid, setSid] = useState("");

  useEffect(() => {
    // 实例化Utils类
    const utilsInstance = new Utils();
    // 异步逻辑需要用async/await处理
    const fetchSid = async () => {
      const sidValue = await utilsInstance.getSid();
      setSid(sidValue || '无数据');
    };
    fetchSid();
  }, []);

  return (
    <View>
      <TextInput label="" value={text} onChangeText={(text) => setText(text)} />
      <Text>il sid è: {sid}</Text>
    </View>
  );
}

方案二：更推荐——将Utils改为纯工具函数 #

因为这个场景只是获取本地存储的sid，用类完全多余，直接导出函数更简洁：

修改Utils.js：

import AsyncStorage from '@react-native-async-storage/async-storage';

export const getSid = async () => {
  try {
    const value = await AsyncStorage.getItem("sid");
    if (value !== null) {
      console.log("value second screen is:", value);
      return value;
    }
    return null;
  } catch (error) {
    console.error('获取sid失败:', error);
    return null;
  }
};

在Userprofile组件中直接导入并调用：

import React, { useEffect, useState} from 'react';
import { TextInput } from 'react-native-paper';
import { View, Text} from 'react-native';
import { getSid } from './Utils';

export default function Userprofile() {
  const [text, setText] = useState("");
  const [sid, setSid] = useState("");

  useEffect(() => {
    const fetchSid = async () => {
      const sidValue = await getSid();
      setSid(sidValue || '无数据');
    };
    fetchSid();
  }, []);

  return (
    <View>
      <TextInput label="" value={text} onChangeText={(text) => setText(text)} />
      <Text>il sid è: {sid}</Text>
    </View>
  );
}

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