У меня есть проблема, при которой я отправляю пользователя на маршрут реагирующего маршрутизатора после входа в систему на основании следующего:
...
//check login
browserHistory.push(self.props.destination_url);
Я ожидал запуска componentDidMount
, так как этот компонент не отображался на экране с момента загрузки приложения, но не будет. Если я щелкну ссылку на него (ссылку реагирующего маршрутизатора) в навигационной панели, componentDidMount
же запустится.
Мне просто нужно сделать вызов API, когда этот компонент появляется на экране из-за browserHistory.push(self.props.destination_url);
изменение маршрута. Я пробовал такие вещи, как
<Router createElement={ (component, props) =>
{
const { location } = props
const key = '${location.pathname}${location.search}'
props = { ...props, key }
return React.createElement(component, props)
} }/>
здесь Компонент не перемонтируется при изменении параметров маршрута и не работает.
Здесь http://busypeoples.github.io/post/react-component-lifecycle/ показывает "при монтировании", "при размонтировании", "при изменении состояния" или "при изменении реквизита". Я не вижу ни одного из тех, кто здесь применяется. Есть ли метод жизненного цикла, который будет запускаться после этого push-перехода browserHistory?
Я пробовал случайные методы жизненного цикла, и componentWillUpdate
запускается после browserHistory.push
но он запускается сотни раз, полностью замедляя работу приложения. Я бы предположил, что то, что я сделал внутри, вызвало почти бесконечный цикл:
componentWillUpdate() {
console.log('it ran componentWillUpdate');
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 restaurant profile");
console.log(error);
});
}
}
На сервере/клиенте вы теперь видите POST, запускаемый сотни раз:
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;
...
Это будет работать для демо студента, но не надолго. Ищем метод жизненного цикла, который будет запускаться только один раз, и это изменение состояния безопасно и не вызовет бесконечный цикл
Мои зависимости r
похожи
"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",
Эти маршруты выглядят как
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 "./components/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="/" component={Nav}>
<IndexRoute component={MapShowRestaurants} />
<Route path="/login" component={LoginPage} />
<Route path="/registerRestaurant" component={RestaurantRegistration} />
</Route>
</Router>
</Provider>
), document.querySelector('.container'));
})
.catch((err) => {
console.log(err);
})