如何解决React Native Context 未填充来自 Firebase 数据库的数据
我正在编写一个程序,我在其中发出请求并检索存储在 firebase 实时数据库中的数据,并尝试使用 react 上下文或其他方式在本地存储该数据。我在几次控制台日志后注意到,发出请求并成功接收数据,但它被设置回 null 从而导致我得到的错误。下面是我的数据上下文代码和我称之为报告上下文的特定上下文。
createDataContext.js
export default (reducer,actions,defaultValue) => {
const Context = React.createContext();
const Provider = ({ children }) => {
const [state,dispatch] = useReducer(reducer,defaultValue);
const boundActions = {};
for (let key in actions) {
boundActions[key] = actions[key](dispatch);
}
return (
<Context.Provider value={{ state,...boundActions }}>
{children}
</Context.Provider>
);
};
return { Context,Provider };
};
reportContext.js
import createDataContext from "./createDataContext";
import firebase from "firebase";
const reportReducer = (state,action) => {
switch (action.type) {
case "fetch_report":
return { ...state,report: action.payload };
case "fetch_user":
return { ...state,user: action.payload };
case "add_report":
return { ...state,newReport: action.payload };
case "reset":
return { ...state,newReport: "",refresh: false };
default:
return state;
}
};
const fetchReport = (dispatch) => async () => {
firebase.database().ref("Reports/")
.get()
.then((snapshot) => {
dispatch({ type: "fetch_report",payload: snapshot.val() });
});
};
const fetchUser = (dispatch) => async () => {
const userId = firebase.auth().currentUser;
firebase
.database()
.ref("Users/" + userId.uid)
.on("value",(snapshot) => {
console.log(snapshot.val());
dispatch({ type: "fetch_user",payload: snapshot.val() });
});
};
export const { Context,Provider } = createDataContext(
reportReducer,{
fetchReport,fetchUser,},{ report: [],user: {},newFile: "" }
);
以下是我在 ReportScreen.js
中调用这些函数的方式import { NavigationEvents } from "react-navigation";
import { Context as ReportContext } from "../context/ReportContext";
import ListItem from "../components/ListItem";
import MenuHeader from "../components/MenuHeader";
import {
View,FlatList,StyleSheet,TouchableOpacity,SafeAreaView,} from "react-native";
import { Icon } from "react-native-elements";
const ReportScreen = ({ navigation }) => {
const { state,fetchReport,fetchUser } = useContext(ReportContext);
return (
<SafeAreaView forceInset={{ top: "always" }} style={styles.container}>
<NavigationEvents onWillFocus={fetchUser} />
<NavigationEvents onWillFocus={fetchReport} />
<MenuHeader user={state.user.profile.nickname} />
<FlatList
data={state.reports}
keyExtractor={(item) => item._id}
renderItem={({ item }) => {
return (
<TouchableOpacity
onPress={() => navigation.navigate("SingleReport",{ item })}
>
<ListItem report={item} user={user} />
</TouchableOpacity>
);
}}
/>
<View style={styles.report}>
<TouchableOpacity onPress={() => navigation.navigate("AddReport")}>
<Icon reverse name="addfile" type="antdesign" color={COLORS.ACCENT} />
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
请问我做错了什么可能导致这不是对象错误?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。