render函数内 if + map 或者 三元 + map，渲染不出数据！

[qbhy]

问题描述
加了if之后的map输出不生效，具体的看代码和截图。直接在 return 里面使用三元运算符也一样。

复现步骤
代码中的 photos 的值大概如下

[
    {
        "title": "标题标题",
        "id": 1,
        "user_id": 1,
        "recommend": true,
        "description": "",
        "user": {
            "uid": 11,
            "name": "用户名",
            "avatar": "头像URL"
        }
    }
]

// render 函数代码

    render() {
        const {
            user,
            currentTab,
            recommends,
            photos,
            classifies,
        } = this.state;
        const tabs = [
            {title: '推荐'},
            {title: '相册'},
            {title: '分类'},
        ];

        let recommendsPanel = null;
        console.log('recommends', recommends);
        if (recommends) {
            const photos = recommends.get('photos');
            console.log('photos', photos);
            recommendsPanel = photos.map((photo, i) => {
                return <View key={i}>{photo.title}</View>;
            });
            // recommendsPanel = <Text>加载好了</Text>
        } else {
            recommendsPanel = <View>加载中...</View>
        }
        console.log('recommendsPanel', recommendsPanel);
        // 这个值不是 加载中 就是 null ,上面的 photos.map 不反会数据，photos 大概结构式 [{id: 1,title: '标题',更多字段}]

        if (user) {
            return (
                <View className="u-user-container">
                    <NavBar onClickLeftIcon={this.back} leftText={"返回"} title={user.getName()}/>

                    <View className="u-user-content">
                        <Image src={user.getBackgroundImage()} lazyLoad={true} className="u-user-bg-img"/>
                        <View className="u-user-avatar">
                            <Image src={user.getAvatar()} lazyLoad={true}/>
                        </View>
                        <View className="u-user-desc">
                            {user.getName()}

                            <View className="u-user-desc-signature">
                                {user.getSignature()}
                            </View>
                        </View>
                    </View>

                    <View className="u-user-tabs">
                        <AtTabs current={currentTab} tabList={tabs} onClick={this.switchTab}>
                            <AtTabsPane current={currentTab} index={0}>
                                <View>
                                    {recommendsPanel}
                                </View>
                            </AtTabsPane>
                            <AtTabsPane current={currentTab} index={1}>
                                <View>
                                    {photos ? (
                                        photos.total()
                                    ) : '加载中...'}
                                </View>
                            </AtTabsPane>
                            <AtTabsPane current={currentTab} index={2}>
                                <View>所有分类</View>
                            </AtTabsPane>
                        </AtTabs>
                    </View>
                </View>
            )
        }
        return (
            <View style={navBarPaddingTop()}>
                loading ...
            </View>
        )
    }

期望行为
正常 map 出对应数据

报错信息
这种写法不报错，就是 recommendPanel 一直是 null

系统信息

• 操作系统: [e.g. OS X 10.12.6]
• Taro 版本 [e.g. v1.1.9]
• Node.js 版本 [e.g. v10.9.0]
• 报错平台 [weapp]

补充信息
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[taro-bot]

CC @yuche

[qbhy]

另外，直接在 render 的 return 里面写以下代码是可以正常渲染数据的，加了 三元 或者 if 就不行

[{id: 1,title: '标题'}].map(photo=><View key={photo.id}>{photo.title}</View>)

[yuche]

       const recommendPhotos = recommends.get('photos');
      if (recommends) {
            recommendsPanel = recommendPhotos.map((photo, i) => {
                return <View key={i}>{photo.title}</View>;
            });
            // recommendsPanel = <Text>加载好了</Text>
        } else {
            recommendsPanel = <View>加载中...</View>
        }

这样应该可行，原来的问题在于 photos 这个变量和 this.state.photos 冲突了。

0383991 会在你这样写的时候报错，下个版本发布。

[qbhy]

@yuche 知道啦，谢谢~

[yuche]

还是先打开，现在如果：

      if (recommends) {
            recommendsPanel = recommends.get('photos').map((photo, i) => {
                return <View key={i}>{photo.title}</View>;
            });
            // recommendsPanel = <Text>加载好了</Text>
        } else {
            recommendsPanel = '加载中...'
}

这样写会报错。

[qbhy]

对，我刚才也在想这个问题，因为这样跟命名冲突没关系，也会报错。

[qbhy]

改了 photos 命名为 recommendPhotos 之后，编译不报错，运行报如上错误。

[yuche]

341101a 修复了这个问题，你得等下个版本。
现在你要把 const recommendPhotos = recommends.get('photos'); 提到 if block 之外。