Проблема: Предупреждение: React.createElement: тип недействителен - ожидается строка

Question

Я использую useReducer, Context и Provider в своем приложении, но я сталкиваюсь с этой проблемой, пожалуйста, кто-нибудь сталкивался с этой проблемой, поэтому, пожалуйста, дайте мне знать решение этой проблемы

Предупреждение: React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено:% s.% S% s, undefined, вы, вероятно, забыли экспортироватьваш компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и с именами.

Проверьте свой код в 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 \ реагировать-native \ Libraries \ YellowBox \ YellowBox.js: 59: 8 по ошибке - node_modules \ expo \ build \ environment \ muteWarnings.fx.js: 26: 24 по ошибке - node_modules \ реагировать \ cjs \ реагировать.development.js: 188:36 in warningWithoutStack - узел_модулей \ реагировать \ cjs \act.development.js: 603: 32 в предупреждении - узел_модулей \ реагировать \ cjs \act.development.js: 1730: 14 в createElementWithValidation * App.js: 20: 5 в_default - node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 9473: 27 в renderWithHooks - node_modules \ реагировать-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 11994: 6 в mountInderentateC... еще 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 \ реагировать \ cjs \act.development.js: 188: 36 в предупрежденииWithoutStack - node_modules \ реагировать \ cjs\ react.development.js: 603: 32 в предупреждении - node_modules \ реагировать \ cjs \act.development.js: 1730: 14 в createElementWithValidation * App.js: 20: 5 в _default - node_modules \ реагировать-родной \ Libraries \ Renderer\ oss \ ReactNativeRenderer-dev.js: 9473: 27 в renderWithHooks - node_modules \ реагировать-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 11994: 6 в mountIndeterminateComponent - ... еще 21 фрейм стека из внутренних компонентов фреймворка

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга _default.- node_modules \ react-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 5716: 10 в createFiberFromTypeAndProps - node_modules \ реагировать-native \ Libraries \ Renderer \ oss \ ReactNativeRenderer-dev.js: 5744: 4 в createFiberFromE... еще 22 стековых фрейма из внутренних компонентов фреймворка

Предупреждение:% s: границы ошибок должны реализовывать getDerivedStateFromError ().В этом методе возвращаем обновление состояния для отображения сообщения об ошибке или резервного интерфейса. RootErrorBoundary - node_modules \ реагировать-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>
  );
};