Question

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

我有两个侧边栏图标，可触发路线更改，导航到新页面。有时当我在它们之间快速切换时，我收到一条错误，指出this.state.list是未定义的（这是我填充下拉列表的列表）。

问题是，在调试时，console.log（this.state）在我的render方法中调用this.state.list之前返回一个空对象。但是，我在getInitialState中定义了列表（以及一堆其他状态变量），所以this.state绝对不应该是空的。

我能想到的唯一一件事就是造成这种情况，如果由于快速切换导致组件的安装/卸载存在一些混乱，我的组件仍然认为它已挂载，因此跳过getInitialState并继续尝试渲染。 React-Router中的那个或者一些bug。

有什么想法？在此先感谢您的帮助！

尼克

P.S我应该重申，这也只是在快速切换期间很少发生，通常是componentDidMount - ＆gt; getInitialState - ＆gt;渲染按预期发生，因此不仅仅是我的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

React - 当正确定义getInitialState时，this.state在渲染中为空

1 个答案: