Having an issue with my React project. When I call this.props.history.push, it will move to the correct component. However, when on that new page I have to refresh the page in order for the new data to show.
I have tried messing with ComponentDidMount/ComponentWillUnMount. I also have a call to update the data in the constructor. However, it will not populate new data without a manual refresh to the page or calling the update a million times continuously in the render.
Any ideas?
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
}})
Currently, I am working on a small project that has two pages. The first one has a list of items and the second has a form that adds new items to the list. For some reason, I set up redux store and actions to each page separately and that causes an issue. Now, when the adding of a new item succeeds, it navigates back to the page that renders the list. Yet, I can not refresh the list of items using an action from this page and I already submit the data from another page (which is the form). I believe there is a way to handle this using redux but I couldn't -so far- figure it out. Any help?
Regards
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 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.
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.