在钩子中调用另一个 class 的方法

Question

大家好，我有一个关于 React Native 的问题。 1）如何在挂钩内调用另一个 class ？ 例如，如果我有：

import React, { Component, 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(() => {
    var y = sid.getSid();
    setSid(t);
  }, []);
  return (
    <View>
      <TextInput label="" value={text} onChangeText={(text) => setText(text)} />
      <Text>il sid è: {sid}</Text>
    </View>
  );
}

在 Utils.js 中：

import React, { Component } from "react";
export default class Utils extends Component {
  constructor(props) {
    super(props);
  }
  async getSid() {
    try {
      var value = await AsyncStorage.getItem("sid");
      if (value !== null) {
        console.log("value second screen is:", value);
        return value;
      }
    } catch (error) {}
  }
  render() {}
}

如何在钩子中调用另一个 class 的方法？

Answer 1

首先，您没有在示例中定义任何自定义钩子。 您有一个名为UserProfile的功能组件和一个名为Utils的 class 组件，它们不呈现任何内容。

在我看来，您想在位于UserProfile的useEffect中调用getSid 。 没有理由在 class 组件Utils中实现这个 function 。

相反，通过引入一个新的自定义挂钩将您的业务逻辑与您的 UI 分开。

我将把这个钩子useUtils 。

export function useUtils() {
    const [sid, setSid] = React.useState();

    React.useEffect(() => {
        const load = async () => {
          try {
              const value = await AsyncStorage.getItem("sid");
              if (value !== null) {
                 setSid(value);
              }
          } catch (error) {}
        }
        load();
    }, [])

   return {
       sid,
   }
}

然后，像往常一样使用它。

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

  if (!sid) {
    return null;
  }

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