Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для com

#javascript #reactjs #react-native

#язык JavaScript #реагирует на #реагировать-родной

Вопрос:

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

файл, создающий контекст, является

 import React, { useReducer } from "react"; export default (reducer, actions, initialState) =gt; {  const Context = React.createContext();  const Provider = ({ children }) =gt; {  const [state, dispatch] = useReducer(reducer, initialState)   const boundActions = {};  for (let key in actions) {  boundActions[key] = actions[key](dispatch);  }  return (  lt;Context.Provider value={{ state, ...boundActions }}gt;  {children}  lt;/Context.Providergt;  );  };  return (Context, Provider); };  

он возвращает два элемента, которые получены контекстом блога

 import createDataContext from "./createDataContext"; const BlogReducer = (state, action) =gt; {  switch (action.type) {  case "add_blogPost":  return [...state, { title: `blog Post Number ${state.length   1}` }];  default:  return state;  } }; const addBlogPost = dispatch =gt; {  return () =gt; {  dispatch({ type: "add_blogPost" })  } } export const { Context, Provider } = createDataContext(  BlogReducer,  { addBlogPost },  [], );  

мой индексный экран выглядит так

 import React, { useContext } from 'react'; import { Text, View, StyleSheet, FlatList, Button } from "react-native"; import { Context , Provider } from '../context/BlogContext'; const HomeScreen = () =gt; {  const { state, addBlogPost } = useContext(Context)  return (  lt;Viewgt;  lt;Textgt; hello there !! lt;/Textgt;  lt;Button  title="add post"  onPress={() =gt; addBlogPost()}  /gt;  lt;FlatList  data={state}  keyExtractor={(blogPost) =gt; blogPost.title}  renderItem={({ item }) =gt; {  return lt;Textgt; {item.title}lt;/Textgt;  }}  /gt;  lt;/Viewgt;  ); } export default HomeScreen;  

и мой app.js файл похож на

 import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from "./src/screens/Home" import { Context, Provider } from './src/context/BlogContext'; const Stack = createNativeStackNavigator();  function App() {  return (  lt;NavigationContainergt;  lt;Stack.Navigatorgt;  lt;Stack.Screen name="Home" component={HomeScreen} /gt;  lt;/Stack.Navigatorgt;  lt;/NavigationContainergt;  ); }  export default () =gt; {  return (  lt;Providergt;  lt;App /gt;  lt;/Providergt;  ); };   

я провожу 4 часа, пытаясь устранить ошибку, но мне это не удалось , я не знаю, откуда она взялась

Комментарии:

1. Создайте повтор для более быстрого решения. в любом случае, я думаю, что это тоже в некотором роде изюминка return (Context, Provider); . Вместо этого он должен был возвращать объект.