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
Related
I have edit/delete functionality for records. when I come on actual page, it displays all data but when I actually edit/delete. Only first entry from cloudant is displayed. But if I again click on edit/delete functionality it displays all data. Must be issue with react state.
Adding details about my implementation.
state:
state in useEffect
I used Carbon components DataTable for rendering countryDetList data.
After edit/delete and Modal closing, only 1st record is displayed.
Becuase the state is not re-rendering
Check what are you setting in state
if you are using objects in state check how you are setting them
for example
const [User,SetUser] = React.useState({})
SetUser({id:21})
this might not be cause a re-render
SetUser({id:26})
you can make it like
SetUser({...{},...{id:26
}})
Consider an entity: Product, i have a page that shows Products to user.
in the page showing Products in componentDidMount i make API reuqest and fetch the data. now with having just a global object named GlobalState or Redux store i save the fetched data in my global state.
then in my page i use global state(as mentioned before either Redux store or just a global object) to show the data. until now this is my approach.
the question is here: each time i navigate to the page componentDidMount gets called and make the api request and populate the global state again. is this ok? if so whats the point of saving them in a global state.
i think im doing sth useless again and again.
#Amas, your right, bcoz componentDidMount component, run each time (ie), when navigating into that screen. if you need to update the global variable value or state it's approach is okay, unless no need.
also try to change the API Request call from componentDidMount. its affecting you application running very slow. suggestion create new function paste the API Request here...
Ex:
ComponentDidMount(){
this.apiReq();
}
apiReq(){
request code here....
}
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.
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.
I'm having issues trying to figure out where I should store stuff like loading or errors state.
Let's say I have a react component that fetches data from a server on mount. What I'm doing is dispatching an action FETCH_SOME_DATA, which will handle the async part thanks to a middleware, which in turn will dispatch a FETCH_SOME_DATA_SUCCESS or FETCH_SOME_DATA_FAILURE depending on the async request's outcome.
Now, what I want to do is showing the user something is happening while I'm fetching the data, so I need something that let me know something is loading. I guess I could have a reducer react to my FETCH_SOME_DATA action and update my store to toggle an isLoading value, but here's where I'm having issues: to me, this shouldn't be in the store, but in the component's state.
I guess that may be weird, so here's why: let's say I'm displaying the last 5 articles of a blog and the whole list (paginated), I don't want both of them to display a loader if the user clicks on "see more articles" in my whole list...
Same thing with errors, really. Let's say my news fetch failed. I don't want both my components to display an error. They should be independent - each component should try and fetch its data and react to errors accordingly.
I hope I'm being clear... I guess I have a strong opinion on the subject but everyone seems to think differently but I don't understand why. Hope you guys explain to me where to store "temporary data" and why.
Thanks!
One of redux priciples is that you have a single source of truth. Your app will have one and only one state - and this state is managed by the store. Your state will not only contain data fetched from server but also informations about the current status of your UI. So if you want to render a loading indicator for a currently active async request, this info will be stored in the state and not in the component.
Whether you're fetching a list of post or each post individually, your store is responsible to reflect what happened. If there is some error when fetching data, you could set a "status" flag to "error" in your posts list reducer or on each post item individually.
Your components are reponsible to display something to the user depending on the current state. Your PostList component could have a prop status received from the store and displaying some useful information to the end user. The same goes for each individual post, one of their possible ui state is an error state so you should have a prop defining this ui state for your component in order to let him display an error to the end user.