I'm using Next.js and I'm trying to access SpeechSynthesis browser's API:
window.speechSynthesis.getVoices()
Since I'm using Next.js, I put the call to window into a useEffect, and it works fine on first load.
//...
const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);
useEffect(() => {
setVoices(window.speechSynthesis.getVoices());
}, []);
//...
But the weirdest of things happen when I reload the page after. I get a misleading error in the console and suddenly window.speechSynthesis.getVoices() returns nothing.
enter image description here
Do you know why? What should i do differently?
I put my code into a Next.js temnplate in CodeSandBox here for you to take a look.
Thanks in advance for yuour help 🙏
I tried putting the function in useCallback, useMemo... but nothing worked.
Related
I have a single page react application that works perfectly fine on my local machine, but when i deploy the app to GitHub pages it runs but does not actually display my application. I know it runs because i noticed i am not getting a 404 page, or even a blank white screen but a screen with the background i chose, and when i change the background in the code and redeploy, the background gets updated. When i check the console, the only error i get is the one i attached.
and
I am trying to get the application to show up when deployed to GitHub pages rather than just displaying a blank app.
seems the props not having movies array. use ternary operator before map statement to fix the issue
const MovieList = (props) => {
......
.......
return (
<>
{props?.movies?.map((movie) =>{
.....
....
})}
<>
)
}
give this code an try..
return(
<>
{props?.movies && props?.movies.map((movie) =>{
Rest of the content
}
</>
)
Try this code, this will help you to get the screen, even if the data isn't there.. also thia avoids blank screen. If you still facing issue just lemme know, i will help you.
Thanks
We used queryClient.invalidateQueries(someQueryKey) to refetch data in queries and its works well.
Project migrated to Next.js and router changed from react-router to next-router code base stays maximum the same except for router changes.
Now if I navigate from one route to another and then go back, queryClient.invalidateQueries(someQueryKey) stops working, all other query calls work as it should useQueris and useMutations .
What weird, when I navigate between the pages queries disappear from Query Dev Tools but continue to work, except of queryClient.invalidateQueries(). If I refresh the page Query Dev Tools starts to show me the correct queries and it starts working correctly until I navigate to another route and back.
I'd really appreciate if anyone can help me with this issue! Let me know if any additional info is required.
Discussion moved to:
https://github.com/tannerlinsley/react-query/discussions/3037
answer:
The following seems to fix the issue, indeed, the previous one was creating a new client every time, so I assume that is why the query invalidations weren't working properly:
export function useReactQueryClient() {
const [queryClient] = React.useState(function () {
return new QueryClient({
defaultOptions: {
queries: {
onError(err) {
// ....
},
},
},
});
});
return queryClient;
}
I tried to search here/Google/GitHub but I'm not even sure of how to look for this. No matter what words I use they will always show me results of how to implement HMR. But that's not my issue. I just want to print on the browser console when the React Fast Refresh (Hot Module Reload) refreshes so I know that it was updated.
Okay. After searching for something different, I managed to find exactly what I wanted.
Instead of looking for "how to print when hmr refreshes" I searched for "how to clear console when hmr refreshes" and I found this:
https://stackoverflow.com/a/53933757/12038349
if (module.hot) {
module.hot.accept() // you don't need this if you're using CRA
module.hot.addStatusHandler(status => {
if (status === 'prepare') console.clear()
})
}
Worked like a charm.
i need to move to login screen if user directly access a page this is what i have tried so far.
if(token===''){router.push('/login')}
Where am i wrong?
This is very trivial you should look around a bit. Anyways you can use useEffect to achieve this on your page like so in next js :
useEffect(()=>{
if(!token){
Router.push('/signin');
}
},[]);
So I am relatively new to the dynamic routing in React.js.
I have encountered one problem, which I cannot solve for about the last 2 hours.
I have a simple webpage with the blog posts on it and I wanted to create a 'Read More' route, which would redirect to the full article page.
So far, after clicking on these link, it redirects to the correct link, however, it does not display anything.
I have tried many things but I cannot see where the problem could be.
Could anyone take a look at this project and let me know why there is nothing being rendered? I believe it might be the problem with the improper importing but I cannot see where.
Please, see the GitHub repo of this project. There are App.js, Post.js, Postlink.js and Post.js that I wanted to connect with each other.
The Postlink.js is the page where I wanted to render full content of my post but it is not being rendered by React.
https://github.com/szygendaborys/LiderAPP
There are two problems:
1) Your Route match is wrong (you've written post/:id when it should be posts/:id):
export const POSTLINK = '/posts/:id'
2) In your Postlink componentDidMount(), you've need to call firebase.posts as a function
const ref = this.props.firebase.posts().doc(this.props.match.params.id)
(in your repo it is this.props.firebase.posts.doc)
It seems you've made a mistake with "export const POSTLINK = '/post/:id';"
Because when I click more, I go to '/posts/:id'; (watch the s). But when I try to change it, I get multiple firebase errors, which I have no knowledge about.
At least changing your route to:
"export const POSTLINK = '/posts/:id';"
Loads the right component.
Hope this helps.