Git Product home page Git Product logo

Comments (8)

Kukkimonsuta avatar Kukkimonsuta commented on March 28, 2024

I'm not certain, but it seems to me that the component is not yet mounted. Try registering your callbacks in componentDidMount (and unregistering in componentWillUnmount)

from react.

elboman avatar elboman commented on March 28, 2024

yeah, it sounds like the component is not mounted. Placing the code in componentDidMount ensures that the component is actually mounted. It may also be that the onSuccess method is not bound to the instance, buy I'd need to see more code to understand better.

from react.

kboucher avatar kboucher commented on March 28, 2024

I tried registering the onSuccess transition hook handler in the componentDidMount lifecycle hook. However, this did not cure the problem.

Which makes sense in retrospect. There was no issue registering the hook. The onSuccess handler fired as expected. The issue is that the setState() call within the onSuccess handler fails because the component is not yet mounted when the onSuccess handler is fired. (Are there transition hooks that definitely fire after the component is mounted? And would I still have access to the passed state params at that time?)

I've isolated the issue in this project: https://github.com/kboucher/uirouter-test

(I'm also trying to setup a plunker, but so far the handler doesn't fire in that context at all.)

from react.

Kukkimonsuta avatar Kukkimonsuta commented on March 28, 2024

The issue is that the component gets unmounted. See lifecycle in pr:

https://github.com/kboucher/uirouter-test/pull/1

from react.

kboucher avatar kboucher commented on March 28, 2024

@Kukkimonsuta Not sure how that helps

I merged your changes and the onSuccess handler no longer fires at all. As I stated above, all I'm trying to do is utilize transition hooks to capture state params passed from one route to another.

This works in Angular, but not in React. If this is not a bug, how can I achieve this functionality?

from react.

Kukkimonsuta avatar Kukkimonsuta commented on March 28, 2024

It's not fix, more of an explanation why it's not working.

From my tests I believe ( @elboman correct me if I'm wrong )

a) params can only hold values defined in URL
b) you can pass any other values in options.custom

There seem to be however a bug/feature, where the transition prop is always the same for retained states - meaning in this case that transition prop on parent has always #id=0. @elboman Please check the repro https://github.com/Kukkimonsuta/uirouter-test

from react.

elboman avatar elboman commented on March 28, 2024

If the handle doesn't fire anymore it sounds like it shouldn't be fired at all, as the parent components gets unmounted during the transition.

I'm trying to understand what you want to achieve with this, as I'm not even sure you need a hook here. Transition hooks are useful for modifying a transition while it's happening, or to interact with the rest of the application (outside of the router scope).


As @Kukkimonsuta already mentioned, there are to ways to pass data from one state to another, and it depends on your needs and how integrated it needs to be in the app architecture:

State params

Each state param has a type:

  • Path parameters (/:fooParam): path
  • Query parameters (?queryParam): query
  • Non-url parameters (param: { foo: null }): any

Or you can define custom param types.

Transition options

You can specify custom data in the transition options, and it will be passed along with the transition, using the options.custom property.

Differences

The difference between the two rely on the use case: state params are more verbose but give you a lot of useful tools. They are explicit and declarative by nature, they are typed, encoded/decoded by default (in the url for example), you can have default values, and so on. (more info here)

The option.custom is a quicker way to achieve this but you won't get all the goodies mentioned above, so I encourage you to use it wisely and only when you need to pass data into some specific transition hook.


The transition prop is not always the same for retained states, if anything changes then the component is re-rendered with the new transition prop. What you are experiencing is the inherit: true default option provided in both the UISref and the stateService.go() transition methods. Since the transition is inheriting any param, the value will stay the same until you override it.

Anyway, I created a simple codesandbox to better illustrate what I mean, let me know if you have any doubts.

from react.

kboucher avatar kboucher commented on March 28, 2024

@elboman Thanks for the clarification and posting that example.

As you indicated by your statement, I apparently did not need a transition hook to simply pass data from the child to the parent.

Transition hooks are useful for modifying a transition while it's happening, or to interact with the rest of the application (outside of the router scope).

I forget now, but I think I went down that path after unsuccessfully trying to the more direct route of accessing the transition params first. However, I think the key ingredient that I was missing was the declaration of the param on the state definition:

    var appStates = [{
        name: "parent",
        url: "/parent",
        component: Parent,

        // Needed this declaration
        params: {
          dataObj: '[null]',
        }
    },

(It was also not necessary to set inherit: false on the call to transition back to Parent.)

I'm still a little fuzzy on some of this, but your responses have helped immensely. Thanks!

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.