[英]React: App not rendering to screen when wrapped in React.Component
[英]React Native Context rendering a blank screen when wrapped inside <Provider>
我正在嘗試使用上下文構建一個簡單的博客本機應用程序,但偶然發現了一個我找不到根源的問題。
這是它的結構:
/context/createDataContext.js 文件:
import React, { useReducer } from "react";
export default (reducer, actions, initialState) => {
const Context = React.createContext();
const Provider = ({ childern }) => {
const [state, dispatch] = useReducer(reducer, initialState);
const boundActions = {};
for (let key in boundActions) {
boundActions[key] = actions[key](dispatch);
}
return (
<Context.Provider value={{ state, ...boundActions }}>
{childern}
</Context.Provider>
);
};
return { Context, Provider };
};
/上下文/BlogContext.js:
import createDataContext from "./createDataContext";
const blogReducer = (state, action) => {
switch (action.type) {
case "add_blogpost":
return [...state, { title: `Blog Post Number ${state.length + 1}` }];
default:
return state;
}
};
const addBlogPost = (dispatch) => {
return () => {
dispatch({ type: "add_blogpost" });
};
};
export const { Context, Provider } = createDataContext(
blogReducer,
{ addBlogPost },
[]
);
/屏幕/IndexScreen.js:
import React, { useContext } from "react"; import { View, Text, StyleSheet, FlatList, Button } from "react-native"; import { Context } from "../context/BolgContext"; const IndexScreen = () => { const { state, addBlogPost } = useContext(Context); return ( <View> <Button title="Add a blod post" onPress={addBlogPost} /> <FlatList data={state} keyExtractor={(blogPost) => blogPost.title} renderItem={({ item }) => { return <Text>{item.title}</Text>; }} /> </View> ); }; const styles = StyleSheet.create({}); export default IndexScreen;
最后是 App.js:
import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import IndexScreen from "./src/screens/IndexScreen"; import { Provider } from "./src/context/BolgContext"; import React from "react"; const Stack = createStackNavigator(); export default function App() { return ( <NavigationContainer> { <Provider> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={IndexScreen} options={{ title: "My app" }} /> </Stack.Navigator> </Provider> } </NavigationContainer> ); }
現在我做了一些調試,即使代碼沒有返回任何錯誤,但問題似乎出在我的提供程序上,因為如果我刪除它,我可以在屏幕上看到內容。 有誰知道為什么會這樣。
非常感謝!
您需要像下面這樣更改 Provider 方法
形式
const Provider = ({ childern }) => {
到
const Provider = (props) => {
然后你可以在傳遞給 content.provider 的同時進行解構,如下所示
<Context.Provider value={{ state, ...boundActions }}>
{props.childern}
</Context.Provider>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.