javascript - react : props populated with componentWillMount and Redux

Question

所以我的渲染中有这个循环:

      {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 被中间件 thunk 填充的那半秒。

有一种方法可以指示 React 在渲染之前“等待”吗？

已解决

Red Mercury 提供的解决方案工作得很好，但是我编写了一个更“类似 redux”的方法来添加一个新数组:

this.props.QuestionsArrayProp = [];

并将其与其 reducer 链接:

  QuestionsArrayProp:  state.rootReducer.questions_reducer.QuestionsTestArrayProp

这样我就得到了一个初始的、空的但存在的数组。

Answer 1

在映射它的问题之前检查它是否存在

  {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 未定义，表达式将短路， map 将永远不会执行