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.
Related
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
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?
I am using Next.js, in the _app.js page (where we set a general webapp state) I have 2 types of data that I need to have in the header (so for every component).
1) The first type is the header info, this info should be rendered before the app loads. I will use get getInitialProps to call the endpoints and put them into the props and then to componentWillMount to add them to the state.
2) The second type is the data for the Search component, it as a lot of data and I don't particularly mind loading it while the app is already rendered as It is not displayed in the first user visual.
So I am gussing that here it is much better prefered to use componentDidMount and asynchorslly call the endpoint that fetches the serach object data and than adding setting the state with it.
The purpose of this questionis double:
1) Review - Am I thinking about this correctly or did I miss something?
2) Question - now, when the data is loaded after first render, I am passing the data like so: _app.js -> Layout -> Menu -> SearchBar
so my question is, in my searchBar I need to do something like
componentDidMount() {
this.setState({ options: this.props.searchBarSource })
}
But, because _app.js is filling this data with an async call, wouldn't this mean that I will always get an empty object?
WWhat is the correct way to solve this? If I setTimeOut to around 3 seconds and then set the data is it a normal solution or very hacky and there are better ways?
What your are trying to do makes sense. Coming to NextJS, you need to be very deliberate about which data should load server side and which shouldn't.
Here are some pointers:
There is no need to setState in the search component, you can
use this.props.searchBarSource as Kunukn mentioned.
[Note - If you are combining getInitialProps and client side (shallow routing), when the user navigates to a new client side route, the initialProps will be undefined. A workaround might be to store initialProps in state or Local Storage.]
The point of getInitialProps is to load async data before the
component mounts. You will always receive the resolved Promise on
componentDidMount, so your this.props.searchBarSource will never
be empty (or more correctly, pending).
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.