Tuesday 15 September 2015

reactjs - React-Router throws Invariant Violation on setState() in ajax call -



reactjs - React-Router throws Invariant Violation on setState() in ajax call -

i'm trying find tricky error i'm experiencing react-router. reason, setting state of 1 of kid components in top-level page route causes next error:

uncaught error: invariant violation: missing "userid" parameter path "/user/:userid"

this error happens regardless of whether or not navigating path. routes this:

var routes = ( <routes> <defaultroute handler={loginpage} /> <route name="login" handler={loginpage} /> <route name="home" handler={homepage} /> <route name="category" path="/category/:category" handler={categoriespage}/> <route name="profile" path="/user/:userid" handler={profilepage}/> </routes> );

and ajax phone call looks this:

var feed = react.createclass({ getinitialstate: function() { homecoming { feeditems: [] }; }, componentdidmount: function() { $.ajax({ url: '/api/transactions', datatype: 'json', success: function(transactions) { this.setstate({ feeditems: transactions }); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.tostring()); }.bind(this) }); }, ....

this feed generated on bunch of pages, including homepage , profilepage. i'm having lot of problem figuring out how :userid parameter related ajax phone call in feed, that's stack trace leads me. help going on here much appreciated.

update: found problem. mongo database out of date (model schemas changed), causing host of problems, bubbling invariant violation. i'm still not exclusively sure how 2 related, deleting old objects fixed problem.

thanks, @ritmatter solving ! reference, here reply link docs.

remember in all react-router <link> elements have in code, include params object links pointing parameterized route:

<link to="billinginfo" params={userid:"user876718236"}>your billing information</link> <!-- linking /user876718236/billing-info -->

have here details: react-router/link

update [2015-03-29] corrected jsx param braces. @akay.

ajax reactjs react-router

No comments:

Post a Comment