I implemented the API to run when the screen is accessed using useEffect in Next.js
The code is simply written as below.
When I first access, the API of the useEffect runs normally.
However, if I go to another screen and then access the screen again, useEffect does not work.
This is the same for useEffect on other screens.
Can I run useEffect every time I access the screen?
Currently, the dependency is set to [], but if [] is removed at all, the application stops.
Which solution will help me?
useEffect(() => {
dispatch(getCartAction());
dispatch(getWishlistAction());
dispatch(getProductsAction());
}, []);
No matter how much I look, I can't find a problem like this.
Related
so i have a react website. I have a script file for animations/transitions called AppHomeScript.js that I import in the index.html with a script tag at the end:
<script src="./scripts/AppHomeScript.js" defer ></script>
the script file also has :
window.onload = () => {
console.log("LOADING SCRIPTS");
const homeButton = document.querySelector(".home-btn");
console.log("HOME BTN: ", homeButton);
const loginPage = document.querySelector(".login-page");
const loginButton = document.querySelector(".login-btn");
const registerButton = document.querySelector(".register-btn");
const registerPage = document.querySelector(".register-page")
const mainTexts = document.querySelector(".main-texts");
const hamburger = document.querySelector(".hamburger");
})
to make sure that it only runs after the components have finished loading. The problem is, in my local computer. the animations work fine in my chrome and operaGX browser. but it does not work on my
internet explorer,chrome's incognito mode, and my android phone's chrome. I also already hosted it in netlify, and I asked my friend if the animations work on their browser, but it does not. a part of the file console logs one of the documents it is trying to get, and it logs null. this gives me the idea that the script is being run even though the components haven't finished rendering.
I am using ES6 for the scripts, if you want to see the whole Script file, it is here:
https://github.com/BjornPython/locate-martial-arts-client/blob/main/public/scripts/AppHomeScript.js
here is the live demo of the app hosted in netlify:
https://poetic-capybara-66732c.netlify.app/
i tried different ways of importing the script file. like using useEffect and ComponentDidMount, or removing the
window.onload = () => {}
when i remove window.onload, the script runs before the components run, and it does not work on any of the browsers.
EDIT // EDIT // EDIT // EDIT // EDIT // EDIT // EDIT
I found a fix, but i'm not sure if this is the best way to deal with this problem.
I added a setTimeout function inside my window.onload.
window.onload = () => {
setTimeout(() => {
// MY CODE HERE // MY CODE HERE
}, 500);
}
If you have a better way of solving this problem, I would greatly appreciate it!
There are a few reasons why your JavaScript code may be running before your components have finished rendering in React:
Execution order: JavaScript code is executed in the order it is included in your HTML file. If your JavaScript code is included before your React components, it will execute before the components can render.
Asynchronous rendering: React components can be rendered asynchronously, which means that the component may not finish rendering before the JavaScript code runs. This can happen if your component makes an API call or performs other asynchronous operations.
State updates: React components can also update their state asynchronously, which means that changes to the state may not be reflected in the component before your JavaScript code runs.
To ensure that your JavaScript code runs after your React components have finished rendering, you can use the componentDidMount lifecycle method. This method is called after the component has finished rendering, so you can be sure that your component is ready before running any JavaScript code. Alternatively, you can use React's built-in useEffect hook to run code after the component has finished rendering.
I am working with a custom hook/function in nextJS, where I getData from firebase, and then map out the array.
It is supposed to be large black squares showing (as in picture), but it's empty beneath the tag beneath CASES. See pic 2.
When I consol log it, the arrays are not showing.
It was showing in the localhost live server, but something happened that caused this bug. However, when I go into the code, especially the parent page, and do something like delete a random blank line, then everything pops forth.
I have also noticed how the consol logs (consol.log(nameOfArray)) sometimes show an empty array but more times show an array - but it doesn't render into the browser.
I get no error messages, either those that comes sometimes when a module can't read code (for example cannot map an empty state).
I am using firefox but I have doublechecked on chrome. Same problem.
I am using NextJS 13.0 with styled-components, as well as a custom hook to fetch data from firebase since getStaticProps/Paths/Serversideprops doesn't seem to work with firebase. Again: this have worked until 12 hours ago.
I have small edits in the next.config, which is mainly compiler to styledComponents and reactStrictMode. I have deleted node_modules and re-installed them. I have also tried to skip importing getData and have it directly in casespage: no show.
Are there perhaps too many modules? I would think so, but at the same time I have the same trouble with another page who doesn't have any children or parent modules, it doesn't show either until I fiddle around in VSC.
example
Here is the structure of the code:
index
homepage
casespage (getData happens here, sends data as props to->)
showcases (passing props further to:)
featured (in here, the array is filtered and then passed as a prop to)
casefItem
index is in pages, the rest are in components/homepage
getData (async export function) is in components/api/cases
first page calling getData
secodn module
third module: also filtering
last child
getData
This is in dev mode, i.e. when I use npm run dev.
how it should be / how it is when I go into the VSC and "edit"
what it looks like
I am using nextjs along with tailwind css and a bunch of other libraries like web3uikit.
the app work totally fine but as soon as I import ConnectButton from web3uikit and use it in the sidebar component, it gives me the following error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Here's the link to the github repo, just cloning and install the dependencies would help you in setting up the project and then npm run dev.
Link: https://github.com/oneknucklehead/marketplace-web3
I believe it is a server-side rendering issue! A screenshot of how I got the <ConnectButton /> to render in a nextjs application is below:
Implementing the ConnectButton Component Screenshot
When the error popped up saying I had an invalid hook call, I closed the error box and the button was rendered in and when I click on it, it showed the web3Modal with the proper sign-in options. I thought that maybe it was a server-side issue
So I fixed it by using a useState hook with a boolean value as seen in the screenshot. It is false by default but will only become true when the component loads in(used a useEffect hook to implement) and I take advantage of that via conditional rendering which is also shown in the screenshot. Once I did that, I haven't encountered the issue at all! Hope this helps!
Go to node_modules -> web3uikit-> node_modules and delete the react folder under it.
web3uikit node module has a version of react pre-installed with it. Apparently, that's causing errors. Now, why does deleting the folder fix the error? Honestly, I don't know, but it removed the error. This answer is from someone named David MacDonald.
After the page load the changes to the store are not being captured by the react, but if i make any changes to the any of the reducer files after a live-reload the entire page starts working, but if i reload the page the becomes the same and store updates stop being rendered.
i have tried a lot of things already, diffrent store configuarations, different methods of getting store values namely connect and useSelector.
i have checked dispatch and stores with logs they are working fine, selectors seem not be the issue as well.
I have wasted more than 4 hours on something that i was supposed to take 30mins, any help would be nice to catch whatever i am missing.
link to code sandbox sample here, https://codesandbox.io/s/confident-oskar-30ow2z?file=/src/App.js
there appears to be some issue with using StrictMode and ReactDOMClient.createRoot. Perhaps you could remove the strict mode in index.js or just use ReactDOM.render. I tried with your sandbox removing the strict mode and it appears to be working fine.
Here is the updated sandbox -
https://codesandbox.io/s/modern-sun-6u5icq?file=/src/index.js
I've run into an issue where after issuing an action via Redux, the store updates just fine (verified with redux-logger) but the connected component's props do not seem to update.
Components (tapping the login button is supposed to bring up the loading screen): https://github.com/OC-Hackers/Volunteer-App-Native/blob/master/src/react/login.js
https://github.com/OC-Hackers/Volunteer-App-Native/blob/master/src/react/loading.js
Reducer: Navigate to src/redux/reducers/session.js and you'll find it.
Action generator: Navigate to src/redux/actions/session.js and you'll find it, I can't post more than 2 links without more rep.
The loading dialog will only display if this.props.success.show is true, but despite redux-logger showing that it's set to true, the dialog never shows. I've looked through my mapStateToProps method and it looks almost exactly like the example one in the Redux tutorial, and I've verified that the component is actually connected. Where am I screwing up?
Your Loading component's mapState function looks wrong. You're returning state.success and state.fetching, but you're defining those fields inside of your sessionReducer. It looks like you need to return state.session.success and state.session.fetching instead.