React Native返回中从自定义钩子调用的函数不是函数

Question

你好，我在React Native中的代码出现错误。我正试图制作一个从Firebase检索显示名称的自定义挂钩，但目前React Native正在说"_readDb.useDisplayName不是函数"；

自定义挂钩(readDb(

import { db } from "../model/config"; // import the db config
import { get, ref, set, child } from "firebase/database";
import useAuth from "./useAuth";
import { React, useState, useEffect } from "react";
import { Text, View } from "react-native";
function useDisplayName() {
const [displayName, setDisplayName] = useState("");
const { user } = useAuth();
const userId = user.uid;
useEffect(() => {
get(child(ref(db), "users/" + userId)).then((snapshot) => {
if (snapshot.exists()) {
setDisplayName(snapshot.val().username);
} else {
console.log("No data available");
}
});
}, []);
return displayName;
}
export default useDisplayName;

主屏幕

import { Button, Text, View } from "react-native";
import { getAuth } from "firebase/auth";
import useAuth from "../../hooks/useAuth";
import { writeUserName } from "../../hooks/useWriteDb";
import { useDisplayName } from "../../hooks/readDb";
export default function HomeScreen(props) {
const { signOut, user } = useAuth();
const name = useDisplayName();
return (
<View>
<Text>{name}</Text>
</View>
);
}

Answer 1

您正在破坏导入：

import { useDisplayName } from "../../hooks/readDb";

所以你必须导出为一个对象：

export { useDisplayName };

或者，按照问题中所写的导出，并在不破坏的情况下导入：

import useDisplayName from "../../hooks/readDb";