#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);
. Вместо этого он должен был возвращать объект.