React Native上下文在<Provider>中包裹时呈现空白屏幕

Question

我尝试使用context构建一个简单的博客原生应用程序，但遇到了一个问题，我找不到解决方法。

这是它的结构:

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

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

非常感谢！

- Jacopo

---

同样发生在 create-react-app v16 中。 - Just Mohit

@jacopo 你能解决这个问题吗？ - abbas.aniefa

Answer 1

你需要像下面这样更改 Provider 方法：

表单

const Provider = ({ childern }) => {

To

const Provider = (props) => {

然后，您可以像下面这样在传递给content.provider时进行解构。

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

- abbas.aniefa