javascript - 错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件)
问题描述
请有人可以帮助我,我正在尝试修复我的 index.js 文件中发生的这个错误:
import { Image, StyleSheet, Text, View, ScrollView } from "react-native";
import { Button, Gap, Number, TransactionCard } from "../../components";
import firebase from "../../config/Firebase";
const Home = ({ navigation, route }) => {
const [profile, setProfile] = useState({});
const [balance, setBalance] = useState({
cashOnHand: 0,
cashOnBank: 0,
totalBalance: 0,
});
const { uid } = route.params;
const getUserProfile = () => {
firebase
.database()
.ref(`users/${uid}/`)
.once("value", (res) => {
const photo = `data:image/jpeg;base64, ${res.val().photo}`;
setProfile({ ...res.val(), photo: photo });
});
};
const getUserBalance = () => {
firebase
.database()
.ref(`balance/${uid}`)
.on("value", (res) => {
if (res.val()) {
setBalance(res.val());
}
});
};
useEffect(() => {
getUserProfile();
getUserBalance();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<View style={styles.page}>
<View style={styles.profileWrapper}>
<View>
<Text style={styles.title}>Money Tracker</Text>
<Text style={styles.subTitle}>Track your money</Text>
</View>
<Image source={{ uri: profile.photo }} style={styles.image} />
</View>
<Gap height={24} />
<View style={styles.balanceWrapper}>
<Text style={styles.cardTitle}>Your Balance</Text>
<Number number={balance.totalBalance} style={styles.balance} />
<Text style={styles.cashOnHand}>
Cash On Hand{" "}
<Number number={balance.cashOnHand} style={styles.amount} />
</Text>
<Text style={styles.cashOnBank}>
Cash On Bank{" "}
<Number number={balance.cashOnBank} style={styles.amount} />
</Text>
</View>
<Gap height={24} />
<View style={styles.addTransactionWrapper}>
<Text style={styles.cardTitle}>Add Transaction</Text>
<Button
title="Cash On Hand"
onPress={() =>
navigation.navigate("AddTransaction", {
title: "Cash On Hand",
uid: uid,
})
}
/>
<Gap height={16} />
<Button
title="Cash On Bank"
onPress={() =>
navigation.navigate("AddTransaction", {
title: "Cash On Bank",
uid: uid,
})
}
/>
</View>
<Gap height={24} />
</View>
);
};
export default Home;
这可能是由您的程序中的一些 JS 模块导出/导入问题引起的,通常是以下两个原因之一:
- 您忘记导出,或者您导出的内容不正确
- 你导入了不存在的东西,或者你错误地导入了一些东西
但我不知道这个错误。提前致谢。
解决方案
推荐阅读
- verilog - 我正在尝试在 edaplayground 中制作测试台代码
- laravel - 无法添加外键约束,- laravel
- vim - 从 gvim 命令行突出显示语法
- c# - 当倒计时 Deltatime 达到一定数量时,打印只打印一次(Unity)
- keras - keras-tokenizer 是否执行词形还原和词干化的任务?
- amazon-web-services - 连接到 ec2 实例时权限被拒绝,我已授予文件权限 400,但仍然无法正常工作
- r - 合并 ldply 以合并多个 csv 文件并通过 mutate/basename 添加带有文件名的列
- r - scale_*_manual 中调色板参数的使用
- javascript - 使用 src="javascript''" 将 Chrome 扩展内容声明性注入到框架中
- javascript - 如何修复“对象作为 React 子项无效(找到:带键的对象)”