Question

我正在使用react-router。我在路由部分中传递状态的位置。但路由器只是第一次更新params 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>
                )
              }
           });

Answer 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/

this.getParams（）触发一次不更新路由上的状态

1 个答案: