node.js - 面临的问题：警告：React.createElement：类型无效—

问题描述

我正在使用useReducer，Context并且Provider在我的应用程序中，但我遇到了这个问题，请任何人遇到这个问题，所以请让我知道它的解决方案

警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：%s.%s%s，未定义，您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认导入和命名导入。

在 App.js:20.，在 _default（在 withExpoRoot.js:20）在 RootErrorBoundary（在 withExpoRoot.js:19）在 ExpoRootComponent（在 renderApplication.js:35）在 RCTView（在 View.js:45）检查你的代码) 在视图中 (在 AppContainer.js:98) 在 RCTView (在 View.js:45) 在视图中 (在 AppContainer.js:115) 在 AppContainer (在 renderApplication.js:34) - node_modules\react-native\Libraries\ YellowBox\YellowBox.js:59:8 错误 - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 错误 - node_modules\react\cjs\react.development.js:188:36 在warningWithoutStack -警告中的 node_modules\react\cjs\react.development.js:603:32 - createElementWithValidation * App.js:20 中的 node_modules\react\cjs\react.development.js:1730:14：5 in _default - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9473:27 in renderWithHooks - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11994:6 in mountIndeterminateComponent - ... 来自框架内部的另外 18 个堆栈帧

警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：%s.%s%s，未定义，您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认导入和命名导入。

在 App.js:20.，在 _default（在 withExpoRoot.js:20）在 RootErrorBoundary（在 withExpoRoot.js:19）在 ExpoRootComponent（在 renderApplication.js:35）在 RCTView（在 View.js:45）检查你的代码) 在视图中 (在 AppContainer.js:98) 在 RCTView (在 View.js:45) 在视图中 (在 AppContainer.js:115) 在 AppContainer (在 renderApplication.js:34) - node_modules\react-native\Libraries\ YellowBox\YellowBox.js:59:8 错误 - node_modules\expo\build\environment\muteWarnings.fx.js:26:24 错误 - node_modules\react\cjs\react.development.js:188:36 在warningWithoutStack -警告中的 node_modules\react\cjs\react.development.js:603:32 - createElementWithValidation * App.js:20 中的 node_modules\react\cjs\react.development.js:1730:14：5 in _default - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9473:27 in renderWithHooks - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11994:6 in mountIndeterminateComponent - ... 来自框架内部的另外 21 个堆栈帧

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查_default. - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5716:10 在 createFiberFromTypeAndProps - node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:5744:4 在 createFiberFromElement - . .. 来自框架内部的另外 22 个堆栈帧

警告：%s：错误边界应实现 getDerivedStateFromError()。在该方法中，返回状态更新以显示错误消息或回退 UI。RootErrorBoundary - node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error - node_modules\expo\build\environment\muteWarnings。 fx.js:26:24 错误 - ... 来自框架内部的另外 28 个堆栈帧

应用程序.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);

    };

标签： node.jsreactjsreact-nativereact-redux

您对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>
  );
};

node.js - 面临的问题：警告：React.createElement：类型无效——需要一个字符串

问题描述

解决方案

推荐阅读