反应——这个.当正确定义getInitialState时，state在render中为空

Question

我将尽力解释这个场景，因为弄清楚最小的情况可能很难。基本上，我有一个使用React-Router的SPA。我目前在一个版本的Firefox (31.4esr)中得到一个奇怪的行为。

我有两个侧边栏图标，它们可以触发路由的变化，导航到一个新页面。有时当我在它们之间快速切换时，我得到一个错误，this.state.list是未定义的(这是一个我填充下拉列表的列表)。

问题是，在调试时，console.log(this.state)在调用(错误)this.state.list发生在我的渲染方法之前返回一个空对象。然而，我在getInitialState中定义了一个列表(以及一堆其他状态变量)，所以这个。State绝对不应该是空的。

我能想到的唯一一件事，这将导致这是如果由于快速切换有一些混淆与安装/卸载组件和我的组件仍然认为它是安装，所以跳过getInitialState并继续尝试渲染。或者是React-Router的bug。

任何想法吗?提前感谢您的帮助!

尼克

p。S我应该重申，这也只发生在非常罕见的快速切换，通常componentDidMount -> getInitialState ->渲染发生预期，所以这不仅仅是一个错误在我的getInitialState是如何写等。

编辑:使用React 0.13.3和React router 0.13.3

编辑2:这是生命周期方法的简化版本，非常基本。

getInitialState: function() {
    return { list: listStore.getList("myList") || [] }
},
 render: function() {
var newList = [];
//this is the line that errors with this.state.list is undefined
this.state.list.forEach(function(listItem) {
    ...
}
return (
    <div>
        <OtherComponent newList={newList} />
    </div>
    )
};

当把console.log放到componentWillMount(只是附加存储监听器)、getInitialState和render中时，当错误发生时，我得到如下输出:

"Setting initial state"
"2,3" //This is this.state.list in componentWillMount
"2,3" //This is this.state.list in initial Render
Object { } //This is this.state the next time it gets called in render :S.

Answer 1

你必须像这样使用mixin:

var state = {
 getInitialState: function() {
  return { list: listStore.getList("myList") || [] }
 }
}
var nameRouter = React.createClass({
  mixins : [state],
  // more content
})

这是因为react-router忽略了getInitialState