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加载数据时它会消失。当然，问题的根源是当中间件thunk填充this.props.OneTestArrayProp时的半秒。

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

已解决

Red Mercury提供的解决方案效果非常好，但是我编写了一个更像“类似redux”的方法，添加了一个新的数组：

this.props.QuestionsArrayProp = [];

并将其与reducer连接：

  QuestionsArrayProp:  state.rootReducer.questions_reducer.QuestionsTestArrayProp

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

Answer 1

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

http://log.go.com/log?action_name=api%3Alaunch%3Alogin&anon=true&appid=DTSS-DISNEYID-UI&client_id=ESPN-FANTASYLM-PROD&conversation_id=de122753-f2d4-4988-a928-a0508dc1369e&correlation_id=dedc6867-eb52-4a5f-a8b7-ea6b44a723a3&os=Ubuntu%20undefined&process_time=11454&sdk_version=Web%202.19.9&success=true&swid=c1b300b5-ec07-4d08-8813-c4f501e9d593&timestamp=2016-09-06T00%3A27%3A23.671Z

如果未定义{this.props.OneTestArrayProp && this.props.OneTestArrayProp.questions.map((q, i) => <div key={i} className="questions_div"> <div>Question: {q.question}</div> <div> )}，则表达式将短路，并且永远不会执行映射

React：使用componentWillMount和Redux填充的道具

1 个答案: