React Native 'PersistGate' 不能用作 JSX 组件。它的实例类型 'PersistGate' 不是有效的 JSX 元素
React Native 'PersistGate' cannot be used as a JSX component. Its instance type 'PersistGate' is not a valid JSX element
我在 TypeScript
.
的 React Native 应用程序中使用 @redux/toolkit
和 redux-persist
store.ts
import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
import AsyncStorage from '@react-native-async-storage/async-storage';
import calenderReducer from './reducer/calender';
const reducers = combineReducers({
graph: calenderReducer,
});
const persistConfig = {
key: 'root',
storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: [thunk],
});
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);
App.tsx
return (
<ApolloProvider client={client}>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<View style={styles.container}>
<Text>Hello World</Text>
<StatusBar style='auto' />
</View>
</PersistGate>
</Provider>
</ApolloProvider>
);
这个 PersistGate 显示这样的错误
您有解决问题的想法吗??
我刚刚补充,
"resolutions": {
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2"
},
这在 package.json 和 运行 yarn
中。问题就解决了。
你的错误可能是因为react 18的新版本。
如果您使用的是版本 17,请尝试以下版本:
"dependencies":
"@reduxjs/toolkit": "1.7.2",
"@react-native-async-storage/async-storage": "~1.15.0",
"react-redux": "7.2.4",
"react-dom": "17.0.1",
"react": "17.0.1",
devDependencies
"@types/react": "~17.0.21",
我在 TypeScript
.
@redux/toolkit
和 redux-persist
store.ts
import { configureStore } from '@reduxjs/toolkit';
import { combineReducers } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';
import AsyncStorage from '@react-native-async-storage/async-storage';
import calenderReducer from './reducer/calender';
const reducers = combineReducers({
graph: calenderReducer,
});
const persistConfig = {
key: 'root',
storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, reducers);
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: [thunk],
});
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
export const persistor = persistStore(store);
App.tsx
return (
<ApolloProvider client={client}>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<View style={styles.container}>
<Text>Hello World</Text>
<StatusBar style='auto' />
</View>
</PersistGate>
</Provider>
</ApolloProvider>
);
这个 PersistGate 显示这样的错误
您有解决问题的想法吗??
我刚刚补充,
"resolutions": {
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2"
},
这在 package.json 和 运行 yarn
中。问题就解决了。
你的错误可能是因为react 18的新版本。 如果您使用的是版本 17,请尝试以下版本:
"dependencies":
"@reduxjs/toolkit": "1.7.2",
"@react-native-async-storage/async-storage": "~1.15.0",
"react-redux": "7.2.4",
"react-dom": "17.0.1",
"react": "17.0.1",
devDependencies
"@types/react": "~17.0.21",