I have a problem with the redundant of routes on vuejs.
I have a Vuejs page with Query that I would like to be able to change continuously but when I make the change (this.$router.replace({query: newQuery})), It show me this Error :
**Uncaught (in promise) Error: Avoided redundant navigation to current location:**
Error Screenshot
This is happening because you are trying to replace the current route with the same route you're actually in.
You should avoid the renavigation to the current location, but if you decide to not avoid it then you need to catch the promise so the browser things the exception is being handled:
Any router action is a promise, you just need to catch it:
this.$router.replace({query: newQuery}).catch(()=>{});
Vue Router documentation on navigation failures
Related
I have this piece of code in my VueJS3 component:
watch(route, () => {
loadData();
findFilter();
});
loadData calls an API loading data, it works fine.
I put this watcher so that when a user calls the same component with another route, the data reloads. Indeed: I have filters, and my URLS are like this: example.com/thepage/optionalFilter.
optionalFilter is optional, I can even have no filter. If I don't use this watcher, the component doesn't reload the data corresponding to the new filter.
But when I use this watcher, I have a warning in the console in development mode:
Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead
And in production mode, the first time I have an error in the console, then if I refresh everything goes fine:
exception { name: "NS_ERROR_NOT_IMPLEMENTED"...
I think my problem comes from the fact I badly watch the route. Am I?
By the way, I tried to use key in my router-view, but it calls every function inside the onMounted block.
Disclaimer: I know this answer has already been asked, but in my case I need a solution for a specific case that is not really covered by other questions/answers.
In my react-native application, I do a lot of network requests that may take a long time to complete. Each request is handled in two main ways:
The request completed successfully. The global redux/flux state is updated and therefore the nested components are updated as well.
The request throws an error. A network error, a server error, a 400 error, whatever. In this case a message must be displayed to the user, in the form of a message that appears on the screen or as an alert.
My problem is that when a component is unmounted, the fetch callbacks are processed anyway when the request completes. In the first case, this is not a problem: the store is updated successfully and everyone is happy.
In the second case though, it is a problem because:
The alert would be displayed in a different screen, which is not correct and led to problems with the Modal component which I use to present error alerts.
The appearance/disappearance of the error message is controlled by the component LOCAL state, which can not be updated on an unmounted component and therefore throws an error.
What are my possibile solutions here? The most trivial one would be to use in each component a _isMounted property and in each fetch error handler, don't do anything if _isMounted == false. However, this approach is verbose and an antipattern.
Do I have any other option?
If you are using react-navigation I believe you could deduct the state in actions and not call the alert.
My suggestion is that you pass the navigation prop to action method and deduct the navigation state there and call the alert as you require.
I am new to react native and I am having a warning that I just don't know how to get rid of it, is it ok if I just hide it as long as it does not become an error to crush my app?
The warning I receive:
Warning: Cannot update during an existing state transition (such as
within render or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects
are an anti-pattern, but can be moved to componentWillMount.
I tried to manage to not happen this warning but if I register a user and than go back to signupscreen and if I try to register another one the warning comes up.
It's best to resolve that warning, you need to look where your updates to the state are happening.
If you do updates to the state or props inside of your render function you are creating infinite render loops.
To help with this problem I need to have your code from render() function. You can Upload it here. Then I can review your code. It will help to solve this problem.
Suddenly I started getting the following TypeError warning from Vue but my app works fine
[Vue warn]: Error in render: "TypeError: Cannot read property 'Name' of null"
This is coming from a data property named 'dashboard' that is loaded via AJAX call after user selects an item from a drop down. In debugging I have been able to simplify the code to get the warning and learned how to not get the warning.
This line will give me the warning but works fine
Dashboard: {{dashboard.Name}}
This line will display the entire dashboard object with no warning
Dashboard: {{ dashboard}}
This line works fine as well with no warning
Dashboard: {{ dashboard == null ? "Null" :dashboard.Name}}
I'm doing my first project with Vue and have had this code in working just fine for a couple of weeks, with no warnings.
Why all of a sudden do I start seeing this warning?
Secondary question is how do you typically track down such warnings. The stack trace is all in Vue code and gives me no idea where the problem originates from in my code.
The Vue team explained this in an answer from their forums here. I'll repeat a shorter version below as it took awhile to get it into my thick head.
A TypeError will be emitted when Vue does its rendering and the state of the data is not yet complete, in my case data was not yet set by the async AJAX call. When the AJAX call does return the data reactivity kicks in and the render is done again and this time the data is in a valid state.
This explains why the below has a TypeError but renders just fine
Dashboard: {{dashboard.Name}}
The TypeError is because Vue is attempting to render null.Name on initial rendering, i.e. dashboard is initially set to null. After the AJAX call returns, dashboard is now set and Vue reactivity kicks in and second rendering works as expected.
This below does not emit the TypeError warning because accessing\rendering null
Dashboard: {{ dashboard}}
is valid with nothing to render so no TypeError, after the AJAX call returns reactivity causes a re-render which displays the data as expected.
Resolution, quoted from the mentioned post.
Generally speaking you would put a conditional render either around your component, or the data that may require that information with a v-if statement to trigger a truthy expression. As null is “false”. When ajax fills it in it becomes “truthy”
I have a small application in react-native with two components.
on Navigating to a component twice this gives me error for setState function.
Anybody have idea about this .
I am using native base as an starter kit for my project.
the only change I did is I have seperated the UI render part in different js file.
Thanks in advance.
this has something to do with your render function.
the setstate function gives error when there is no such state variable available.
may be on navigating again to that same screen it is giving you a new state for that page instead of the previous state.
Please check your render function.