在鈎子中調用另一個 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>
  );
}