score:2
Accepted answer
solution i used
i created a function to test if the previous data is the same as the changed data.
compareparams(prevprops, props) {
if (!prevprops || typeof prevprops.params !== typeof props.params) {
return false;
}
return object.is(props.params, prevprops.params);
}
so this tests
- are there any previous props?
- and then if the props are equal to the previous props?
- then return false if there are if this is the case
- if not then we see compare props and previous props parameters
in componentdidupdate
in the compoonentdidupdate
we use this function to determine if the data should be updated
componentdidupdate(prevprops) {
if (this.compareparams(prevprops, this.props)) {
return;
}
this.props[this.constructor.reducername](this.props.params);
}
conclusion
this code updates the body of a page that uses the same react component if it receives new data.
score:0
maybe you can try use onchange event on route component, check route api and then signal to child component that refresh is needed...
Source: stackoverflow.com
Related Query
- React Router "Link to" does not load new data when called from inside the same component
- React router dom passing data from parent component to child router component does not pass the props.match
- React Router Link with params not reloading page with new data from componentDidMount and Redux axios data fetching
- React Router Dom & Firebase Auth: history.push changes url but does not render new component when called after firebase auth create account
- Can not able to get the location state when opened with "open link in a new tab" in react router
- Why Link from React Router Dom does not refresh when go back?
- when I try to destructing the data from react query I am getting Property 'data' does not exist on type 'void'
- react router Link doesn't cause rerender when visited on the same path
- React router is not reloading page when url matches the same route
- React router does not change view, but url is changed - App is load inside iframe
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- Force remount component when click on the same react router Link multiple times
- Why does my react app go to the custom 404 not found page when the link is clicked?
- React Router: The Router only loads / path and does not load any other path
- return value is not rendering when returned from inside the handleclick() function in react
- React router Redirect does not work when route comes from another component
- Link props when passed does not work when browser back and forth is clicked React router v4
- Styling the active link using the NavLink component from React Router is not working as expected
- Data from the backend is not appearing when you assign it into new object on the front end
- my page is not rendering with different id on the same page when i use link in react components
- External link not working when using LINK from react router dom
- Fetched data from Rest API does not appear in the browser in React
- Why does React Router not render the previous link again in a nested setup?
- React router 4 - Why is my component only rendered on manually setting the url but not on clicking a Link with same url?
- Why does React not hold focus on an input when you return a const vs a function from the component?
- Axios POST does not recognize the data being passed in from react
- Why when a component is wrapped inside a High Order Component, the new component does not have any of the static methods of the original component?
- Component not receiving props when pushed from same path - react router
- React component do not gets rendered when loading the data from state
More Query from same tag
- Construct a grid view in REACT
- Error when import my library on a project
- Using waxjs to get information about NFTs in Wax Cloud Wallet - possible?
- Prefer destructuring es-lint error
- how to search endpoint from the server using Star Wars SWAPI API
- React.js Failed to compile: unexpected token
- Typography String does not stay withing bounds of Material-UI CardContent
- How to set headers with axios
- How to make DataGrid columns start from right side Material UI
- signInSuccessWithAuthResult return value in Firebase UI callbacks
- Other way to creating a function that can receive param from each element from array?
- Why gatsby-plugin-manifest cannot resolve 'gatsby'?
- how to update/upgrade to latest version of aws-sdk using npm in a react js project?
- Pass a React component as a param to another React component
- Can i use dispatch like setState in this problem?
- Ref react dynamically
- How to render conditional form in reactJS?
- Unable to convert example of `useSwr` hook to use `react-query`'s `useMutation` hook?
- React - child elements not rerendering
- Dynamically loading React components
- How to pass conditionally a true or false to React boolean props with typescript?
- My React front-end is unable to call my node-express backend server, the fullstack app is deployed in heroku
- Test document print via enzyme - React
- I'm attempting to make a placeholder image for my app in react when theres no image available
- How to fix setState() gives the opposite value of checkbox?
- What is the default implementation for "shouldComponentUpdate" lifecycle method in React components
- React Input type not able to insert any data
- my react component is working properly but the jest test fails
- x-axis horizontal line and y-axis labels are not displaying in D3 Grouped bar chart
- Can not get value of input in reactJS Typescript