I have an issue where I will send a user to a react-router route after login, based on the following:
...
//check login
browserHistory.push(self.props.destination_url);
I was expecting ponentDidMount to run, since this ponent had not been on the screen since I loaded the app, but it will not. If I click a link to it (react-router link) in the nav bar, ponentDidMount does run however.
I just need to make an API call when this ponent es on the screen because of a browserHistory.push(self.props.destination_url); route change. I've tried things like
<Router createElement={ (ponent, props) =>
{
const { location } = props
const key = `${location.pathname}${location.search}`
props = { ...props, key }
return React.createElement(ponent, props)
} }/>
here Component does not remount when route parameters change and it isn't working.
Here / shows "on mount", "on unmount", "on state change", or "on props changes". I'm not seeing any of those apply here. Is there a lifecycle method that will run after this browserHistory push transition?
I've been trying random lifecycle methods and ponentWillUpdate does run after browserHistory.push but it runs hundreds of times, pletely slowing the app down. I'd assume something I did inside it caused the nearly infinite loop:
ponentWillUpdate() {
console.log('it ran ponentWillUpdate');
if (this.props.email) {
console.log('firing off /api/userInfo');
let self = this;
axios.post('/api/userInfo', {email: this.props.email})
.then(function (response) {
let result = response.data.result;
console.log('after calling /api/userInfo');
console.log(response);
console.log(result);
if (result) {
self.setState({restaurant_profile: result});
}
})
.catch(function (error) {
console.log("Something went wrong trying to check for a user's restaurant profile");
console.log(error);
});
}
}
On the server/client you now see the POST run hundreds of times:
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
...
This will work for the student's demo, but not longterm. Looking for a lifecycle method that will only run once, and that changing state is safe and won't cause infinite loop
My r dependencies look like
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^3.0.5",
"react-router-dom": "^4.2.2",
"react-transform-hmr": "^1.0.4",
"redux": "^3.7.2",
These routes are looking like
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { Router, Route, Link, IndexRoute, browserHistory } from "react-router";
import reducers from "./reducers";
import { loadConfig, getConfig } from "./config";
import Nav from "./Nav";
import LoginPage from "./containers/LoginPage";
import MapShowRestaurants from "./ponents/MapShowRestaurants";
import RestaurantRegistration from "./containers/RestaurantRegistration";
const createStoreWithMiddleware = applyMiddleware()(createStore);
getConfig.then((config) => {
loadConfig(config);
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path="/" ponent={Nav}>
<IndexRoute ponent={MapShowRestaurants} />
<Route path="/login" ponent={LoginPage} />
<Route path="/registerRestaurant" ponent={RestaurantRegistration} />
</Route>
</Router>
</Provider>
), document.querySelector('.container'));
})
.catch((err) => {
console.log(err);
})
I have an issue where I will send a user to a react-router route after login, based on the following:
...
//check login
browserHistory.push(self.props.destination_url);
I was expecting ponentDidMount to run, since this ponent had not been on the screen since I loaded the app, but it will not. If I click a link to it (react-router link) in the nav bar, ponentDidMount does run however.
I just need to make an API call when this ponent es on the screen because of a browserHistory.push(self.props.destination_url); route change. I've tried things like
<Router createElement={ (ponent, props) =>
{
const { location } = props
const key = `${location.pathname}${location.search}`
props = { ...props, key }
return React.createElement(ponent, props)
} }/>
here Component does not remount when route parameters change and it isn't working.
Here http://busypeoples.github.io/post/react-ponent-lifecycle/ shows "on mount", "on unmount", "on state change", or "on props changes". I'm not seeing any of those apply here. Is there a lifecycle method that will run after this browserHistory push transition?
I've been trying random lifecycle methods and ponentWillUpdate does run after browserHistory.push but it runs hundreds of times, pletely slowing the app down. I'd assume something I did inside it caused the nearly infinite loop:
ponentWillUpdate() {
console.log('it ran ponentWillUpdate');
if (this.props.email) {
console.log('firing off /api/userInfo');
let self = this;
axios.post('/api/userInfo', {email: this.props.email})
.then(function (response) {
let result = response.data.result;
console.log('after calling /api/userInfo');
console.log(response);
console.log(result);
if (result) {
self.setState({restaurant_profile: result});
}
})
.catch(function (error) {
console.log("Something went wrong trying to check for a user's restaurant profile");
console.log(error);
});
}
}
On the server/client you now see the POST run hundreds of times:
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = '[email protected]' LIMIT 1;
...
This will work for the student's demo, but not longterm. Looking for a lifecycle method that will only run once, and that changing state is safe and won't cause infinite loop
My r dependencies look like
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^3.0.5",
"react-router-dom": "^4.2.2",
"react-transform-hmr": "^1.0.4",
"redux": "^3.7.2",
These routes are looking like
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { Router, Route, Link, IndexRoute, browserHistory } from "react-router";
import reducers from "./reducers";
import { loadConfig, getConfig } from "./config";
import Nav from "./Nav";
import LoginPage from "./containers/LoginPage";
import MapShowRestaurants from "./ponents/MapShowRestaurants";
import RestaurantRegistration from "./containers/RestaurantRegistration";
const createStoreWithMiddleware = applyMiddleware()(createStore);
getConfig.then((config) => {
loadConfig(config);
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path="/" ponent={Nav}>
<IndexRoute ponent={MapShowRestaurants} />
<Route path="/login" ponent={LoginPage} />
<Route path="/registerRestaurant" ponent={RestaurantRegistration} />
</Route>
</Router>
</Provider>
), document.querySelector('.container'));
})
.catch((err) => {
console.log(err);
})
- I know that ponentDidMount only gets called once which is why it's not working as you expect (because (i believe) react-router does an initial render before it's actually called) I could be wrong - hence the ment and not an answer. I'll see if i can't find the docs for that. Also, as you've discovered, ponentWillUpdate() isn't the right place for that either... you might try creating your own method and then call it in the browserPush callback? Just a thought. – rimraf Commented Oct 1, 2017 at 1:31
-
how would I call it in
browserHistory.push? From what I understand you just pass it the URL you want to go to and it pushes it into the history and reroutes you there – codyc4321 Commented Oct 1, 2017 at 1:51 - I thought you could add a callback... when looking for that info i found this: github./ReactTraining/react-router/issues/3554 – rimraf Commented Oct 1, 2017 at 2:21
- 1 @codyc4321 can you provide us two things? First and important, which version of react router are you using, and second, your defined routes. Thanks – rdarioduarte Commented Oct 2, 2017 at 1:22
-
1
@codyc4321 are you sure that "ponentDidMount" is not getting called? I tried to replicate your scenario as best as I could in this sandbox: codesandbox.io/s/ov84yrzyy5 it works as I would expect it to,
ponentDidMountis getting called every time I "navigate" to that ponent, it does not get called when I am already ON that ponent. – dubes Commented Oct 6, 2017 at 13:13
2 Answers
Reset to default 5 +50don't put API calls in a ponent lifecycle.
create an action
function getUserInfo(payload) {
// do axios
return {
type: 'GET_USER_INFO',
payload: result_of_your_api_call,
error: false/true
};
}
create reducer for this action and mutate state in reducer
after that, you need to matStateToProps and mapDispatchToProps
connect(mapStateToProps, mapDispatchToProps)(YourMagicComponent)
that connects your ponent and your redux
After that, you get a redux state in your ponent. For more information please read this http://redux.js/docs/basics/ExampleTodoList.html
Remember 1. when ponent initialized it hasn't any data in props except defaultProps. 2. ponentDidMount doesn't know anything outside ponent (available only default props and props defined before ponent mounted) 3. if you need to do something in ponentWillUpdate you need to define rules for update that's ponent
ponentWillUpdate(nextProps) {
this.setState(key: nextProps.key)
}
shouldComponentUpdate(nextProps, nextState) {
// fix for your update
if (this.state.key !== nextProps.key) {
return true;
}
}
@codyc4321 try self.props.router.push('/url')