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

【问题标题】：this.getParams() firing once Not updating the states on Routingthis.getParams() 触发一次不更新路由状态
【发布时间】：2015-04-08 20:59:36
【问题描述】：

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

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);
   });

更新这是表格类：

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>
                )
              }
           });

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

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

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

更新

您应该在小提琴中更改这一行（第 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}/>

工作小提琴：http://jsfiddle.net/t4hvuu0r/

【讨论】：

谢谢 - 这也解决了我遇到的问题！