2016-09-06 3 views
1

Так что у меня этот цикл в моей визуализации:React: реквизит заселенного с componentWillMount и Redux

 {this.props.OneTestArrayProp.questions.map((q, i) => 
     <div key={i} className="questions_div"> 
      <div>Question: {q.question}</div> 
     <div> 
    )} 

this.props.OneTestArrayProp загружается так:

componentWillMount() { 
    if (! this.props.OneTestArrayProp.length) { 
    this.props.dispatch(fetchOneTest(test_id)); 
    } 
} 

Но я получаю :

Error: "this.props.OneTestArrayProp.questions.map" undefined 

ошибка появляется только на секунду, а затем она исчезает, когда Redux загружает данные. Конечно, корень проблемы заключается в том, что половина секунды, когда this.props.OneTestArrayProp заполняется промежуточным файлом.

Есть способ указать на «Реакция» на «ожидание» перед тем, как сделать рендер?

решаемых

Решение, предлагаемое Red Mercury работает довольно хорошо, но я кодируюсь более «Redux-подобный» подходом, добавив новый массив:

this.props.QuestionsArrayProp = []; 

и связывающий его с редуктором :

QuestionsArrayProp: state.rootReducer.questions_reducer.QuestionsTestArrayProp 

Таким образом, я получаю начальный, пустой, но существующий массив.

ответ

4

Проверьте, если он существует до отображения над своими вопросами

{this.props.OneTestArrayProp && 
    this.props.OneTestArrayProp.questions.map((q, i) => 
    <div key={i} className="questions_div"> 
     <div>Question: {q.question}</div> 
    <div> 
)} 

this.props.OneTestArrayProp Если будет непредсказуемыми выражение не будут короткое замыкание и карта не будут выполнены

Смежные вопросы