I am getting this error: error message
Not really sure what I did wrong because everything looks right with my code, at least if I missed something.
import React, { useState } from "react";
import Home from "./screens/home";
import { View } from "react-native";
import * as Font from "expo-font";
import { AppLoading } from "expo-app-loading";
const getFonts = () =>
Font.loadAsync({
"poppins-regular": require("./assets/fonts/Poppins-Regular.ttf"),
"poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
});
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return <Home />;
} else {
return (
<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
);
}
}
Can you try changing
import { AppLoading } from "expo-app-loading";
to this:
import AppLoading from 'expo-app-loading';
Related
When I try to use createContext() the console gives me this error:
App.js:6
Uncaught TypeError: Cannot destructure property 'consoleLogFunction' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is null.
I've seen others asking questions about this here in Stack Overflow but I can't find a solution.
GlobalContext.js
import React from 'react'
import { createContext } from 'react'
export const AppContext = createContext();
function GlobalContext() {
const consoleLogFunction = () => {
console.log("ok")
}
return (
<AppContext.Provider value={{consoleLogFunction}}></AppContext.Provider>
)
}
export default GlobalContext
App.js
import "./index.css";
import { useContext, useEffect } from "react";
import { AppContext } from "./components/GlobalContext";
function App() {
const { consoleLogFunction } = useContext(AppContext);
useEffect(() => {
consoleLogFunction();
}, []);
return (
<AppContext>
<div>home</div>
</AppContext>
);
}
export default App;
You don't need to export 'AppContext', creating the provider and exporting that is good enough.
Try this, I've also made a couple of modifications to make it easier to use the context later:
GlobalContext.js
import React from 'react'
import { createContext, useContext } from 'react'
const AppContext = createContext();
function GlobalContext({ children }) {
const consoleLogFunction = () => {
console.log("ok")
}
return (
<AppContext.Provider value={{consoleLogFunction}}>
{ children }
</AppContext.Provider>
)
}
export default GlobalContext;
// This is a helper
export const useGlobalContext = () => useContext(AppContext);
Home.js
import { useEffect } from "react";
import { useGlobalContext } from "./components/GlobalContext";
export const Home = ({ children }) => {
const { consoleLogFunction } = useGlobalContext();
useEffect(() => {
consoleLogFunction();
}, []);
return(
<div>home</div>
)
};
App.js
import "./index.css";
import { useEffect } from "react";
import GlobalContext from "./components/GlobalContext"
import { Home } from "./components/Home";
function App() {
return(
<GlobalContext>
<Home />
</GlobalContext>
);
}
export default App;
hello man the problem is because App component is not wrapped inside GlobalContext . and in the GlobalContext component you should handle the children prop.
it will work when doing it like this example :
import { useEffect, useContext, createContext } from "react";
import "./styles.css";
export const AppContext = createContext();
function GlobalContext(props) {
const consoleLogFunction = () => {
console.log("ok");
};
return (
<AppContext.Provider value={{ consoleLogFunction }}>
{props.children}
</AppContext.Provider>
);
}
const Home = () => {
const { consoleLogFunction } = useContext(AppContext);
useEffect(() => {
consoleLogFunction();
}, []);
return <div>home</div>;
};
export default function App() {
return (
<GlobalContext>
<Home />
</GlobalContext>
);
}
Hope this help.
I am getting this error /!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore(). when I compile my application. The application works fine, but I do not know why I get the error. I tried configuring similar to other projects on google and nothing seems to work.
I tried using this solution, but had no luck. Not sure how to fix this.
Here is my _app.tsx
import type { AppProps } from 'next/app'
import { Toaster } from 'react-hot-toast';
import { useRouter } from 'next/router';
import { wrapper } from '../features/store';
import useAuth from '../hooks/useAuth';
import useDarkMode from '../hooks/useDarkMode';
import '../styles/global.css';
const App = ({ Component, pageProps }: AppProps) => {
useAuth();
useDarkMode();
const router = useRouter();
return (
<main>
<Component {...pageProps} key={router.asPath} />
<Toaster
position="bottom-center"
toastOptions={{
duration: 3000,
}}
/>
</main>
)
};
export default wrapper.withRedux(App);
here is index.tsx
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useSelector } from "react-redux";
import { User } from "../domain/accounts/user";
import Loading from "../icons/Loading";
import useUser from "../hooks/useUser";
const Home = () => {
const user = useUser();
const router = useRouter();
useEffect(() => {
if (user.isAuthenticated !== null) {
if (user.isAuthenticated) router.push('/home');
if (!user.isAuthenticated) router.push('/explore')
}
}, [user.isAuthenticated]);
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '95vh',
}}>
<Loading height={80} width={80} />
</div>
);
}
export default Home;
here is store.js
import { configureStore } from "#reduxjs/toolkit";
import { userSlice } from "./user";
import { userPreferenceSlice } from "./userPreference";
import { createWrapper } from "next-redux-wrapper";
const makeStore = () => {
return configureStore({
reducer: {
user: userSlice.reducer,
userPreference: userPreferenceSlice.reducer,
},
});
}
export const wrapper = createWrapper(makeStore);
Did you try npm install next-redux-wrapper
Then, in _app.tsx try replaceing the wrapper.withRedux import with import { useWrappedStore } from "next-redux-wrapper";
And instead of using the wrapper.withRedux function, try using the useWrappedStore method:
const MyAppWithRedux = useWrappedStore(MyApp);
export default MyAppWithRedux;
It's HomePage component of react js
import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate,useParams } from 'react-router-dom';
import { Main } from '../components/Main';
import { Controls } from '../components/Controls';
import { ALL_COUNTRIES } from '../config';
import { List } from '../components/List';
import { Card } from '../components/Card';
import { Details } from './Details';
export const HomePage = () => {
const [countries,setCountries] = useState([]);
const navigate = useNavigate();
useEffect(() => {
axios.get(ALL_COUNTRIES).then(({data})=>setCountries(data))
},[]);
return (
<>
<Controls/>
<List>
{
countries.map((c)=>
{
const countryInfo={
img:c.flags.png,
name:c.name,
info: [
{
title:'Population',
description:c.population.toLocaleString(),
},
{
title:'Region',
description:c.region,
},
{
title:'Flag',
description:c.capital,
},
],
};
return <Card key={c.name} onClick={(e)=>{navigate('/country/${c.name}')}}
{...countryInfo}/>
})
}
</List>
</>
);
};
It's second components Details
export const Details = ({match}) => {
return (
<div>
Details {match.param.name}
<div/>
);
};
[https://i.stack.imgur.com/KUyrA.png][before]
HomePage itself looks like this
but when i click on flag/card it sends me on second page as expected but gives me this error
[https://i.stack.imgur.com/JqEHm.png][after]
also i'm using react-router-domV6
and this API https://restcountries.com/v2/all
also both Components are in
Halo, i'm very confuse with this condition.. i already set cookies if user was regist or login before.. but if i refresh the page.. the cookie was not read and not directed to page that i set before
my code is
import "bootstrap/dist/css/bootstrap.min.css";
import { useStore } from "../src/redux/store";
import { Provider } from "react-redux";
import { useEffect } from "react";
import { authService } from "../src/services/AuthServices";
import { useRouter } from "next/router";
import { SSRProvider } from "react-bootstrap";
function MyApp({ Component, pageProps }) {
const store = useStore(pageProps.initialReduxState);
const dataAuth = authService.isLogin();
const router = useRouter();
const routeList = ["/login"];
useEffect(() => {
if (!dataAuth) {
router.push("/");
}
}, []);
return (
<SSRProvider>
<Provider store={store}>
<Component {...pageProps} />
</Provider>
</SSRProvider>
);
}
export default MyApp;
does anyone can help ?
I did everything like in the documentation, but my Custom Fonts do not want to load in. I could wait for hours and nothing happens...
This is my App.js:
import React, { useState } from 'react';
import AuthNavigation from './AuthNavigation';
import useFonts from './shared/useFonts';
import LoadingScreen from './screens/LoadingScreen';
export default function App() {
const [isReady,setIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
setIsReady(true);
}
useEffect(() => {
LoadFonts();
},[])
if (!isReady) {
return(
<LoadingScreen/>
)
}
else{
return (
<AuthNavigation/>
);
}
}
And this is my useFont.js
import Font from 'expo-font';
export default useFont = async () =>
await Font.loadAsync({
QuicksandMedium: require('../assets/Fonts/Quicksand-Medium.ttf'),
AmaticSCRegular: require('../assets/Fonts/AmaticSC-Regular.ttf')
})
There is no error printed in the console, so I have no clue what I am doing wrong :/
I'm not sure, but maybe that if should be the problem. Try with this:
import React, { useState } from 'react';
import AuthNavigation from './AuthNavigation';
import useFonts from './shared/useFonts';
import LoadingScreen from './screens/LoadingScreen';
export default function App() {
const [isReady,setIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
setIsReady(true);
};
useEffect(() => {
LoadFonts();
},[]);
return (
<>
{isReady ?
<AuthNavigation/>
:
<LoadingScreen/>
}
</>
);
}
Solution is to import your Fonts like this:
import * as Font from 'expo-font';