I have a page in my react/redux app that has a search field and I can make an ajax request based on input and display the result on the screen. The problem is that whenever I leave the page and return back it preserves the data I fetched. What is a conventional way of resetting a component whenever you leave the page? I should probably do something with componentWillUnmount function, but things don't quite work.
You store the state in a redux store. Thus the behavior - the data is still there in the store when you navigate between pages. It needs to be removed upon navigating away from page. This could be done by dispatching a reset action from the componentWillUnmount lifecycle method of the page component.
Do you need to be storing the fetched data in your redux store? If you are looking for the data to be loaded every time you go to the page and reset whenever you leave, just storing the data in component state would probably be a better fit, since it gives you that behavior by default.
Related
Lets say I have only one component which fetches some data on being mounted.
I want to be able to change the url (pushState) once the component fetches that data however I dont want to change anything on the page or re-render the component.
Let's say I have a route '/' and it loads a which fetches searched contents on load. Once the data is fetched, I want to be able to update the url to say /searchterm
I am looking to do something similar to
window.history.pushState(null, null, '/searchterm') where the url is updated but nothing on the page changes.
Tried using with state and using this.props.history.push
You could store the route in your state, and then memoize the component with a function that returns true if the route changes, which will prevent an update. If you're still using class components, you can implement similar functionality using shouldComponentUpdate
I have Component A and Component B. In component A, users can apply filters to a list of elements and they navigate between the two components using a side bar. Whenever users click to go to B, and back to A, the filters are set back to the initial state. What is the best way to save the state of component A so that when they come back to it, they see all of the filters they originally applied.
I Suggest you to use LocalStorage , pass in the filter so that it won't be reset. Upon mounting the component , you should always check first if does the localstorage have a value or not.
you can set it via :
localStorage.setItem('variableName', value);
and get it via :
localStorage.getItem('variableName');
It sounds like A is being created/destroyed every time you switch views, so it loses any state that it was storing.
Move the state up to a parent component of both A and B, and pass it down to A via props. The parent component won't be destroyed, so the state will persist.
Thinking in React may help clarify this.
In my knowledge; State in react is not cleared until it is programmed to do so, the page is refreshed or going to another page. Maybe it'll be more clear if you provide your code. One thing which I used to keep previous State is following:
this.setState((previousState) => ({ stateName: previousState.stateName.concat(newValue) }))
I think the parent state of A and B won't change unless you refresh the page.
Another way, you can use AsynStorage or store that data on the Server to retrieve it later when coming back to component A even you refresh the page.
I have List page where list of posts are displaying by calling the action in componentDidMount method. Links are also displayed so that when user click it will show that particular post. But when new page/url is rendered it shows the list of all posts without fetching, but when we refresh the page it does not show the list. What it means that the state data is visible to new page.
How it occurs because in react state clears when url is changed ?
enter image description here
How it occurs because in react state clears when URL is changed?
This is true and not true, actually depends on what context you are looking at. In here react state(the component state will clear) when the component is unmounted or when you deliberately.
So possible places you should look at it are:
check whether you are checking somewhere that data is fetched and you don't need to make the call. some flag in your reducer that is not being reset.
Are you using any kind of data persistence, while reloading? like saving in session storage or local storage.
Try to add debugger in componentDidMount and this.props.fetchPost function and see if those are being called
I have a problem: I have a NavBar that loads an AJAX which retrieves a name and another data. Well, the problem is that this data stores them in states of the declared component itself as NavBar.jsx and when I use routes (react-router) the component is mounted and dismantled losing its states, therefore, every time that change of route has That re-make the AJAX call. This same problem I have for a button 'Enter', which has status 1 and when someone is logged in takes 0 status, but every time I change the route returns to state 1 (as if it were not logged, although it is actually logged). My question is: How can I create states that are maintained despite changing routes? (I know this is not possible, with states I am referring to variables, or anything I can declare that does not change value every time you reassemble the components, in this case NavBar, when changing paths. Thank you.
This can be solved in several ways.
save the returned data in localStorage, check in localStorage before doing the ajax call, is the data exists, just use it instead.
Use redux - this moves the state to the app level instead of the component, unmounting the component will not delete the state.
do not re-render the navbar on each navigation(if it's possible in your app).
See the tutorial for nested routes for react-router ;
https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes
this option means that route changes will only re-render the "internal page" and not constant things like the navbar, submenu, footer etc.
When browsing around our page I noticed a strange behavior. The first request to /recipe/1 works fine, when I go then to /recipe/2 I still receive the data from /recipe/1. Clicking then to /recipe/3 I get the data from recipe 2.
It seems like the page renders faster than it takes the fetch action to collect new data, but then it does not re-render with the new data.
What is the proper way to avoid that problem?
We are using react + redux + react-router.
I think I figured out a solution. In the constructor I save the current objects, then I fetch the new objects and check in the render function if they changed, until then I don't render the page properly.