Comments (11)
A bug.
After a fix if your async state depends on props (you construct URL from props or something like that) you would need to trigger async state update manually (componentDidMount or componentWillReceiveNewProps).
from react-router-component.
Fixed in 0.18.0. See the example of updating async state in case of dependence of it on this.props
— https://github.com/andreypopp/react-quickstart/blob/master/client.js#L33-L54
from react-router-component.
Sorry, it still goes into an infinite async loop for me.
Condition currentHandler.type === nextHandler.type
is false
because currentHandler
is previous active tab, and nextHandler
is the tab I'm trying to prefetch. So this again triggers setState
and prefetchAsyncState
and next tab is never loaded.
from react-router-component.
Condition currentHandler.type === nextHandler.type is false because currentHandler is previous active tab, and nextHandler is the tab I'm trying to prefetch.
If previous active tab and the next tab are of the same component type then their .type
will be identical. So the question is are your active tab and the next tab components of the same type? If not then getInitialStateAsync
should be triggered (this matches getInitialState
semantics).
The infinite loop maybe caused by the fact that your state doesn't converge. For example when you have state A
you trigger update to state B
and vice-versa. It's hard to say without looking at the actual code.
from react-router-component.
The infinite loop maybe cause by the fact that your state doesn't converge. For example when you have state A you trigger update to state B and vice-versa. It's hard to say without looking at the actual code.
I mean you probably have to do somewhere:
...
getInitialStateAsync: function(cb) {
if (!this.props.model.isPrepared) {
this.props.model.prepare(cb);
}
},
...
And of course model's internal state should survive rendering root component.
from react-router-component.
They're not of the same type, no. But it's weird to have getInitialStateAsync triggered twice:
- when I click tab switching link;
- when the model is ready and render is called on root component.
I can't give you a test case right now but this should reproduce it:
On link click, navigate to an async component. This component's gISA should wait three seconds, then call method that re-renders root component, then call gISA callback with {} as state.
In this case, the second step (calling root render) triggers gISA again and so it goes.
Д
On Sun, Mar 30, 2014 at 2:42 PM, Andrey Popp [email protected]
wrote:
The infinite loop maybe cause by the fact that your state doesn't converge. For example when you have state A you trigger update to state B and vice-versa. It's hard to say without looking at the actual code.
I mean you probably have to do somewhere:... getInitialStateAsync: function(cb) { if (!this.props.model.isPrepared) { this.props.model.prepare(cb); } }, ...
Reply to this email directly or view it on GitHub:
#29 (comment)
from react-router-component.
They're not of the same type, no.
If they are not of the same type when it getInitialStateAsync
should be triggered (as well as getInitialState
which is a model for getInitialStateAsync
semantics).
- when I click tab switching link;
- when the model is ready and render is called on root component.
You should just check in getInitialStateAsync
if your model is ready or not before calling any async actions. I think this is reasonable cause your handlers don't own the state and so should assume it can be in different states before performing update actions on it.
from react-router-component.
Though I may miss some important details and if you have suggestions on how it should behave I'd like to hear them and improve react-router-component/react-async! But as far as I understand, in this case the decision to fire on not to fire some async action depends on some knowledge which is specific to the application — router cannot know if model is ready or not.
from react-router-component.
If they are not of the same type when it getInitialStateAsync should be triggered (as well as getInitialState which is a model for getInitialStateAsync semantics).
Maybe I didn't makes myself clear. gISA is triggered twice on the same (second) component. For comparison, gIS is triggered only once (right before mounting).
from react-router-component.
So they are of the same type?
It looks like this:
var Tab = React.createClass({
getInitialStateAsync: function(cb) { ... },
...
})
var App = React.createClass({
render: function() {
return (
<Locations>
<Location path="/1" handler={Tab} tabName="someTab" />
<Location path="/2" handler={Tab} tabName="otherTab" />
</Locations>
)
}
})
right? In this case getInitialStateAsync
should be triggered once for a transition from /1 to /2 and vice-versa.
Sorry, I might be slow sunday mornings :-)
from react-router-component.
I meant getInitialStateAsync
should be triggered once and transtions from /1
to /2
and vice versa shouldn't trigger it. Just the initial one.
from react-router-component.
Related Issues (20)
- Higher-Order Component HOT 3
- Examples that pass args to renderRouteHandler are out of date
- Programmatically navigate? HOT 3
- Unknown prop `hash`
- Anyone integrated with redux?
- custom Link component (HighlightedLink) in ES6? HOT 1
- Question: Should the router have a callback to filter variable values from routes? HOT 2
- Should Hash environment url-decode routes? HOT 1
- Getting new warnings in console HOT 1
- Pathname Environment, History API and a double click in the back button to go back? HOT 7
- Update for React 15.5 warnings HOT 2
- queries do not survive in contextual routes.
- CaptureClicks drops querystrings
- Warning: getDefaultProps HOT 5
- docs don't make it clear how to navigate programatically HOT 1
- React 16.0 Support HOT 1
- onBeforeNavigation is invoked late HOT 1
- Location always renders a div HOT 3
- componentWillReceiveProps warning HOT 1
- Documentation Site Application Error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-router-component.