I have the following states: 'home.person','home.person.house'
I'm in 'home.person.house' and want to hard reload state stating from 'home.person'. According to https://github.com/angular-ui/ui-router/pull/1809, I can pass as a parameter the start state from which the reload will start. So, I have the following line:
$state.reload('home.person');
However, the reload doesn't occur even thought everything in ui-route seems to work fine (debugged it). The resolve function of state 'home.person' wasn't called. Are there any suggestions why I'm not getting the result I wish for?
You can try using this :
$state.go("home.person",{reload:true});
It would be good if you could share the parent and child state codes. It's difficult to provide a solution without much reference.
Related
I am pretty new to react and trying to use a web component in the template and there are is a thing i dont understand.
It can be seen in this example below if you run the page (may need to hit reload once). Then watch the console. You will see the log in the constructor() the outerHTML is not "ready" yet its missing all attributes in the markup and they arrive only later on (in the connectedCallback) which is the second log.
https://stackblitz.com/edit/react-ts-jcjuvs?file=App.tsx,index.tsx
Whats happening here? Is there anyway to force the attributes to be available initially? Or not taken off and then put back on?
Note that doing this in a normal page does not have the same effect.
https://stackblitz.com/edit/js-l4uh4f?file=index.js,index.html
a) whats happening?
b) can i make this not happen?
Thanks!
There no no guarantee that a web component will have access to attributes in the constructor and attribute values can change at anytime. You should use the attributeChangedCallback lifecycle callback to know when values are set.
The element's attributes and children must not be inspected, as in the non-upgrade case none will be present, and relying on upgrades makes the element less usable.
Requirements for custom element constructors and reactions
My problem
I'm trying to add a component to an array at the input of a user(here the Building component).
My problem is that everything i add in this array is somehow duplicated and i can't explain it.
I also wasn't able to reproduce the problem in codesandbox but here is my town component that adds new Building components :
https://codesandbox.io/s/goofy-bhabha-yb6sq
The problem lies in the function addBuilding, because the position is added there and the duplicate does not contain the same position as the prévious building.
I've also made sure that the function is not called two times, à console.log inside the function told me that.
In this function i :
Copy the object i receive from a parent component (props.addBuild).
Create à new position .
add the position to the copy of the object.
give it a key number.
add it to the set.
done.
What happens :
I made sure there is no other push nowhere else (i've commented this function and nothing showed up as i triggered the addition of a new building)
As the component re-renders the duplication occurs.
What i've tried so far
I've tried using set instead of arrays which gives me the same
result.
I've also tried to copy the state and use the setState at the end which resulted in a too much calls of setState.
Pop the entire content of my state and push back the once that i want to keep.
I've also tried to add the function somewhere else in my program and got the same results.
A thing that would be a bit trashy but could solve my problem would be to remove duplicates from the array or set and add them back in the array. I've tried this and got too much calls to render error. But i'm sure there might be a way i have not tried.
Another detail is that i'm using electron.
Any help is welcome.
I've solved my problem by moving up my code in the parent component like suggested by #Sulthan.
But also instead of using a state i used a function so instead of passing a state as a prop to the town component i directly called the function that added a building to the list of building.
Here is what it looks like :
https://codesandbox.io/s/goofy-bhabha-yb6sq?file=/src/App.js
I still can't explain what happened but the state that called the function addBuilding provoked a second call of this function.
There is probably a better way to refer to this issue but I can't think of it at the moment.
I'm posting this to hopefully help anyone who ends up having this situation pop up. I couldn't find an answer anywhere when I was trying to figure this out.
The issue:
You have a state with one or more variable parameters.
Ex: /arg1/arg2/:var1
But there are exceptions where :var1 has a specific deviation from the norm you establish with that state .
In other words, :var1 can be anything except "foo". If :var1 == foo (/arg1/arg2/foo), then you need to handle that state differently.
My specific case for this was with a state url like: /arg1/arg2/arg3/:var1/arg4/:var2/:var3 where :var3 had an exception if it was "exact" (/arg1/arg2/arg3/:var1/arg4/:var2/exact).
The solution is simple but may not be completely (or immediately) obvious.
Place the exception state above the fully variable state.
In other words:
.state('stateexception',{url:'/arg1/arg2/foo'})
.state('fullvarstate',{url:'/arg1/arg2/:var1'})
I have two context types: (1) productsContexts & (2) rangeContext.
rangeContext is nothing more than preset ranges from a json file so as to group the products according to each respective range.
Below is an illustration of a side-box component that groups products
according to those preset ranges and it also illustrates the problem:
The first visit to that page, everything works fine, but click off and then re-visit the page and the previous data remains and then doubles itself, 3rd time, it is triple, and so on.
I did nothing with the rangeContext data but pass it along to a local variable for mapping data manipulation. I did not save anything to the context itself.
Here is what I have tried to do to solve this problem; all have failed:
I passed the rangeContext to state first, then on componentWillUnmount, I initialized state.
I Object.assign() the rangeContext to the local variable instead of directly passing the context to the local variable.
I took the context completely out of this component and used it in it's parent, and passed it to this component as props.
Nothing is working. While the hard data does not change, the range component never gets initialized on unmount and revisiting the page just carries forward what was in the range in the last visit and adds to it.
I know I probably did not do a great job explaining, but I know the problem is related to the context and I sure do not want to hit the database again, as I already did that for an earlier component.
Does anyone recognize the problem and have a solution?
Thanks
UPDATE:
I moved contextTypes for ranges out of the side-box component.
Using redux flux, I dispatched for the range-actions in side-box's parent and passed the ranges to side-box as props. The problem went away, but I am not happy. I need someone to tell me why this is the right things to do, as ...
I had already called range-actions in a previous component, so why not put it in contextTypes instead of calling redux again?
Where as I only had 3 lines of code on side box, I have the same amount of code lines since now I am calling propTypes, but now I also have
MORE LINES of code in the parent calling redux, something I had already done for the range data in a previous component.
I would greatly appreciate someone telling me if I am still doing this
all wrong, or why it is right I had to add 26 more REDUNDANT lines of
code calling redux flux?
I am using React.rb (a opal-ruby binding to react.js) and Opal-rspec for testing.
It seems like I need to reset react's internals between tests as I am getting the awful "Cannot read property ‘firstChild’ of undefined" error, in some tests.
If I move the "failing" test to be the first test, then the error goes away (but can come up in a later test.)
React.rb is NOT being loaded twice, I have made sure a couple of ways including putting a console.log into the first line of the react source file.
SOOO It would seem I need a way to completely clear reacts state between tests. Any way to do that?
The problem seems to occur if you do a static render of a component that is later asynchronously updated (i.e. when a promise is fulfilled). Once this happens react is busted. I don't know if this is inherent in react, or its because of the reactrb bindings (I doubt that as they are very simple) or something else.