react组件能不能在render函数的return之外做判断?

Question

我把从后台获取到的数据放进了Subcomment_data对象里，如果按上图Subcomment_data.sub_comments.length这样写会报错Cannot read property 'length' of undefined。因为第一次render的时候后台数据还没获取到，Subcomment_data是个空对象，我改成Subcomment_data.sub_comments && Subcomment_data.sub_comments.length就可以了。
但后面需要渲染的数据还有很多，我又不想写一大堆的&&。请问可以在return之前做些什么判断让我能直接写Subcomment_data.sub_comments.length吗？

Answer 1

添加默认值：

defaultProps = {
    Subcomment_data: {
        Sub_comments: []
    }
}

Answer 2

如果你实在不想为所有数据指定默认值，可以添加额外的一个变量来判断请求是否完成：

render() {
    let content;
    // 请求完成后将requestDone置为true
    if(requestDone === true) {
      // 其他的数据类似
      content = (<span>{Subcomment_data.sub_comments.length}条评论</span>);
    }
    return (
      <div className="SubComment">
        <header className="header">
          {content}
        </header>
      </div>
    )

Answer 3

我遇到了同样的问题 其实可以这样写

如 {Subcomment_data && Subcomment_data.sub_comments.length}

随便答的哈 溜了溜了