Реагировать - this.state пуст в рендере, если getInitialState правильно определен

Я постараюсь изо всех сил объяснить сценарий, так как составить скрипку для наименьшего возможного случая может быть сложно. По сути, у меня есть SPA, использующий React-Router. В настоящее время я наблюдаю странное поведение в одной версии Firefox (31.4esr).

У меня есть два значка на боковой панели, которые вызывают изменение маршрутов при переходе на новую страницу. Иногда, когда я быстро переключаюсь между ними, я получаю сообщение об ошибке, что this.state.list не определен (это список, которым я заполняю раскрывающийся список).

Проблема в том, что при отладке console.log (this.state) возвращает пустой объект непосредственно перед тем, как в моем методе рендеринга произойдет вызов (эта ошибка) this.state.list. Однако у меня есть список, определенный в getInitialState (вместе с множеством других переменных состояния), поэтому this.state определенно не должен быть пустым.

Единственное, о чем я мог подумать, это могло бы вызвать это, если из-за быстрого переключения возникает некоторая путаница с монтированием / размонтированием компонентов, и мой компонент все еще думает, что он смонтирован, поэтому пропускает getInitialState и пытается выполнить рендеринг. Либо это, либо какая-то ошибка в React-Router.

Есть предположения? Заранее спасибо за помощь!

Ник

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.

reactjs javascript user-interface flux
person SleepyProgrammer    schedule 15.07.2015    source источник
comment
Когда вы отлаживаете / регистрируете состояние? что там написано, если вы зарегистрируете это внутри componentWillMount?   -  person David Hellsing    schedule 16.07.2015
comment
getInitialState вызывается перед componentDidMount. И состояние, и подпорки доступны перед монтажом (см. componentWillMount).   -  person Matthew Herbst    schedule 16.07.2015
comment
Вы можете показать нам часть своего кода? По крайней мере, урезанную версию всех методов жизненного цикла, которые вы используете?   -  person Matthew Herbst    schedule 16.07.2015
comment
Слишком верно ... Что еще больше сбивает с толку, что начальные значения состояния недоступны при вызове рендеринга.   -  person SleepyProgrammer    schedule 16.07.2015
comment
У меня сейчас нет доступа к коду, но завтра я проверю и опубликую его!   -  person SleepyProgrammer    schedule 16.07.2015
comment
Обновлен с помощью кода!   -  person SleepyProgrammer    schedule 16.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

вам нужно будет использовать миксин следующим образом:

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

это потому, что реактивный маршрутизатор игнорирует getInitialState, который был определен

person Jose Albizures    schedule 06.09.2015