Javascript 调用browserHistory.push（"；/url"；后componentDidMount未运行

我有一个问题，在登录后，我会根据以下情况将用户发送到react路由器路由：

        ...
        //check login
        browserHistory.push(self.props.destination_url);

我希望

componentDidMount

能够运行，因为自从我加载应用程序后，这个组件就没有出现在屏幕上，但它不会出现。如果我在导航栏中单击指向它的链接（react router link），

componentDidMount

会运行

当这个组件出现在屏幕上时，我只需要调用一个API，因为有一个

browserHistory.push（self.props.destination\uURL）路线更改。我试过这样的方法

<Router createElement={ (component, props) =>
{
  const { location } = props
  const key = `${location.pathname}${location.search}`
  props = { ...props, key }
  return React.createElement(component, props)
} }/>

在服务器/客户端上，您现在可以看到POST运行数百次：

Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = 'fake@fake.com' LIMIT 1;

Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = 'fake@fake.com' LIMIT 1;

Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = 'fake@fake.com' LIMIT 1;

Executing (default): SELECT `id`, `email`, `password`, `RestaurantId` FROM `Users` AS `User` WHERE `User`.`email` = 'fake@fake.com' 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);
})

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“react Router”导入{Router，Route，Link，IndexRoute，browserHistory}；
从“/reducers”导入减速机；
从“/config”导入{loadConfig，getConfig}；
从“/Nav”导入Nav；
从“/containers/LoginPage”导入登录页面；
从“/components/MapShowRestaurants”导入MapShowRestaurants；
从“/containers/RestaurantRegistration”导入RestaurantRegistration；
const createStoreWithMiddleware=applyMiddleware（）（createStore）；
getConfig.then（（配置）=>{
loadConfig（配置）；
ReactDOM.render(
(
)，document.querySelector（'.container'）；
})
.catch（（错误）=>{
控制台日志（err）；
})
@codyc4321尝试self.props.router.push（'/url'）不要将API调用放入组件生命周期中

创建一个动作

function getUserInfo(payload) {
  // do axios
  return { 
      type: 'GET_USER_INFO',
      payload: result_of_your_api_call,
      error: false/true
  };
}

为此操作创建减速器，并在减速器中更改状态

之后，您需要matStateToProps和mapDispatchToProps

connect(mapStateToProps, mapDispatchToProps)(YourMagicComponent)

连接组件和redux的

之后，组件中会出现一个redux状态。有关更多信息，请阅读本文

记得吗
1.组件初始化时，除了defaultProps之外，它在props中没有任何数据。
2.componentDidMount不知道组件之外的任何内容（仅提供默认道具和在安装组件之前定义的道具）
3.如果您需要在componentWillUpdate中执行某些操作，则需要为该组件的更新定义规则

componentWillUpdate(nextProps) {
  this.setState(key: nextProps.key)
}

shouldComponentUpdate(nextProps, nextState) {
  // fix for your update
  if (this.state.key !== nextProps.key) {
     return true;
  }
}

我知道componentDidMount只会被调用一次，这就是为什么它不能像您期望的那样工作（因为（我相信）react router在实际调用它之前会进行初始渲染）我可能是错的-因此是评论，而不是答案。我看看能不能找到那方面的文件。另外，正如您所发现的，componentWillUpdate（）也不是合适的位置。。。您可以尝试创建自己的方法，然后在browserPush回调中调用它？只是想一想。在
browserHistory.push中如何称呼它？据我所知，你只需将你想要访问的URL传递给它，它就会将其推送到历史记录中，并将你重新路由到那里。我想你可以添加一个回调。。。我在寻找这些信息时发现：@codyc4321你能提供我们两件事吗？首先也是很重要的一点，您使用的是哪一版本的react路由器，其次是您定义的路由。Thanks@codyc4321您确定没有调用“componentDidMount”吗？我尝试在这个沙盒中尽可能地复制您的场景：它的工作方式与我预期的一样，
componentDidMount
在每次我“导航”到该组件时都会被调用，而在我已经在该组件上时它不会被调用。您能为您的答案添加一些上下文吗？为什么要这样做？与OP所尝试的相比，它所修复的错误是什么？我有一个工作测试，我会在我能验证这些时重新打开赏金我有一个工作测试，我会在我能验证这些时重新打开赏金
componentWillUpdate(nextProps) {
  this.setState(key: nextProps.key)
}

shouldComponentUpdate(nextProps, nextState) {
  // fix for your update
  if (this.state.key !== nextProps.key) {
     return true;
  }
}