React 原生上下文在包装内部<Provider>时呈现空白屏幕

Question

我正试图使用上下文构建一个简单的博客原生应用程序，却偶然发现了一个我找不到根目录的问题。

以下是它的结构：

/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 };
};

/context/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 },
[]
);

/screens/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>
);
}

现在我进行了一些调试，尽管代码没有返回任何错误，但问题似乎出在我的提供程序上，因为如果我删除它，我可以在屏幕上看到内容。有人知道为什么会发生这种事吗。

非常感谢！

Answer 1

您需要像下面的一样更改Provider方法

表单

const Provider = ({ childern }) => {

至

const Provider = (props) => {

然后你可以在传递到content.provider时进行销毁，就像下面的一样

<Context.Provider value={{ state, ...boundActions }}>
{props.childern}
</Context.Provider>