this.getParams() 触发一次不更新路由状态

Question

我正在使用反应路由器。我在路由部分传递状态的地方。但是路由器只是第一次更新参数 Here is fiddle link for code 这是TableClass

var Table = React.createClass({
         mixins: [ Router.State ],
        getInitialState: function() {
                                    var table;
                                    var table_id = this.getParams().table_id;
                                    console.log(table_id);
                                    tables.forEach(function(model) {
                                      if(model.id == table_id) {
                                        console.log(model);
                                        table = model;
                                      }
                                    });
                                    return {
                                      table: table
                                    }
                                }

})

这是路由器

var routes = (
      <Route handler={Tables} path="/">
        <DefaultRoute handler={Index} />
        <Route name="table" path="/table/:table_id" handler={Table}/>
      </Route>
    );
   ReactRouter.run(routes, function (Handler) {
      React.render(<Handler/>, document.body);
   });

更新这是表格 class:

var Tables = React.createClass({
    indexTemplate: function() {
      return <h2>Please select a table</h2>
    },
    render: function() {
            var links = tables.map(function(table) {
              return <Link to="table" params= {{ table_id:table.id}} className="panel six columns" key={table.id}>{table.id}</Link>
            });
          return (
                  <div className="row">
                    <div className="twelve rows">
                      <h1>Ordr</h1>
                      <hr />
                      <div className="row">
                        <div id="tables" className="four columns">
                          <h2>Tables</h2>
                          {links}
                        </div>
                        <div id="order" className="eight columns">
                          <RouteHandler/>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              }
           });

Answer 1

应该有一些代码可以将 Table 组件嵌套在 Tables 组件中，如下所示：

<ReactRouter.RouteHandler {...this.props} key={this.props.params.tableId}/>

如果您不指定 key 属性并且在不同的表之间进行路由，例如 /table/1 和 /table/2，则不会安装 Table 组件并卸载，只是重新渲染。因此 getInitialState 方法不会被触发。

更新

您应该在 fiddle（第 43 行）中更改此行：

<RouteHandler />

到

<RouteHandler key={this.props.params.table_id}/>
// table_id name comes from this definition: <Route name="table" path="/table/:table_id" handler={Table}/>

工作fiddle：http://jsfiddle.net/t4hvuu0r/

this.getParams() 触发一次不更新路由状态

this.getParams() firing once Not updating the states on Routing

reactjs

react-router

this.getParams() 触发一次 不更新路由状态

this.getParams() firing once Not updating the states on Routing

reactjs

react-router

this.getParams() 触发一次不更新路由状态