面临的问题：警告：react.createElement：type无效-应为字符串

Question

不变冲突：元素类型无效：应为字符串（对于内置组件）或类/html" target="_blank">函数（对于复合组件），但GET：未定义。您可能忘记从定义组件的文件导出组件，或者您可能混淆了默认导入和命名导入。

检查_default的呈现方法。-node_modules\react-nativer\libraries\renderer\oss\reactnativerenderer-dev.js:5716:10 in createFiberFromTypeAndProps-node_modules\react-nativerEnderer-dev.js:5744:4 in createFiberFromElement-...22个框架内部的堆栈帧

警告：%s：错误边界应实现getDerivedStateFromError（）。在该方法中，返回状态更新以显示错误消息或回退UI。Rooterrorbounder-node_modules\react-native\libraries\yellowbox\yellowbox.js:59:8 In error-node_modules\expo\build\environment\muteWarnings.fx.js:26:24 In error-................................................

app.js

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IndexScreen from './src/screens/IndexScreen';
import { Provider } from './src/context/BlogContext';

const navigator = createStackNavigator({
  Index: IndexScreen
}, {
  initialRouteName: 'Index',
  defaultNavigationOptions: {
    title: 'Blogs'
  }
});

const App = createAppContainer(navigator);

export default () => {
  return (
    <Provider>
      <App />
    </Provider>
  );
};

blogcontext.js

import React, { useReducer } from 'react';

    export default (reducer, actions, initialState) => {
         const Context = React.createContext();

         const Provider = ({ children }) => {
             const [state, dispatch] = useReducer(reducer, initialState);

             const boundActions = {};
             for(let key in actions){
                 boundActions[key] = actions[key](dispatch);
             }

             return(
                 <Context.Provider value={{state, ...boundActions}}>
                     {children}
                 </Context.Provider>
             );
         }

         return(Context, Provider);

    };

Answer 1

您在BlogContext方面有一个问题。你没有正确使用它。您将其导出为默认函数，而在app.js中，则使用命名导入。

BlogContext应该如下所示：

import React, { useReducer } from 'react';

    export default (reducer, actions, initialState) => {
         const Context = React.createContext();

         const Provider = ({ children }) => {
             const [state, dispatch] = useReducer(reducer, initialState);

             const boundActions = {};
             for(let key in actions){
                 boundActions[key] = actions[key](dispatch);
             }

             return(
                 <Context.Provider value={{state, ...boundActions}}>
                     {children}
                 </Context.Provider>
             );
         }

         //return an object with two keys
         return {Context, Provider};

    };

和app.js应相应地使用：

import blogContext from './src/context/BlogContext';
/**
 ...code ... 
**/
//here you create your provider by calling the function imported from BlogContext
//with the expected arguments
const { Provider } = blogContext(reducer, actions, initialState)

/**

**/

export default () => {
  return (
    <Provider>
      <App />
    </Provider>
  );
};