Question

我在我的应用中使用了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）       在View中（在AppContainer.js：98）       在RCTView中（在View.js：45）       在View中（在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   -warningWithoutStack中的node_modules \ react \ cjs \ react.development.js：188：36   -警告中的node_modules \ react \ cjs \ react.development.js：603：32   -createElementWithValidation中的node_modules \ react \ cjs \ react.development.js：1730：14   * _default中的App.js：20：5   -node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：9473：27   在renderWithHooks中   -node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：11994：6   在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）       在View中（在AppContainer.js：98）       在RCTView中（在View.js：45）       在View中（在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   -warningWithoutStack中的node_modules \ react \ cjs \ react.development.js：188：36   -警告中的node_modules \ react \ cjs \ react.development.js：603：32   -createElementWithValidation中的node_modules \ react \ cjs \ react.development.js：1730：14   * _default中的App.js：20：5   -node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：9473：27   在renderWithHooks中   -node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js：11994：6   在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   -错误的node_modules \ expo \ build \ environment \ muteWarnings.fx.js：26：24   -...更多来自框架内部的28个堆栈框架

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

面临的问题：警告：React.createElement：类型无效-预期为字符串

1 个答案: