在组件中使用 map 编译出错

[FEhaoxinjie]

问题描述
在组件中使用 map 编译出错

复现步骤
[复现问题的步骤]
在组件中使用 map 处理逻辑报错

import Taro, { Component } from '@tarojs/taro'
import { AtIcon } from 'taro-ui'
import { View, Text, ScrollView, Block } from '@tarojs/components'
import './index.scss'
import '../../../static/fonts/icon.css'

const data = [
    {
        label: '常用',
        value: 1,
        currentProvince: {
            label: '当前定位',
            children: [
                {
                    label: '北京',
                    value: 10,
                },
            ]
        },
        popularProvince: {
            label: '当前定位',
            children: [
                {
                    label: '北京',
                    value: 10,
                },
                {
                    label: '北京',
                    value: 11,
                },
                {
                    label: '北京',
                    value: 12,
                }
            ],
        }
    },
    {
        label: '山西',
        value: 2,
        children: [
            {
                label: '北京',
                value: 10,
            }
        ]
    },
    {
        label: '河南',
        value: 3,
        children: [
            {
                label: '北京',
                value: 11,
            },
            {
                label: '北京',
                value: 12,
            },
            {
                label: '北京',
                value: 13,
            },
        ]
    },
    {
        label: '北京',
        value: 4,
        children: [
            {
                label: '北京',
                value: 11,
            },
            {
                label: '北京',
                value: 12,
            },
            {
                label: '北京',
                value: 13,
            },
        ]
    },
    {
        label: '陕西',
        value: 5,
        children: [
            {
                label: '北京',
                value: 11,
            },
            {
                label: '北京',
                value: 12,
            },
            {
                label: '北京',
                value: 13,
            },
        ]
    },
    {
        label: '湖南',
        value: 6,
        children: [
            {
                label: '北京',
                value: 11,
            },
            {
                label: '北京',
                value: 12,
            },
            {
                label: '北京',
                value: 13,
            },
        ]
    },
    {
        label: '湖北',
        value: 7,
        children: [
            {
                label: '北京',
                value: 11,
            },
            {
                label: '北京',
                value: 12,
            },
            {
                label: '北京',
                value: 13,
            },
        ]
    },
    {
        label: '吉林',
        value: 8,
        children: [],
    },
    {
        label: '吉林',
        value: 9,
        children: [],
    },
    {
        label: '吉林',
        value: 10,
        children: [],
    },
    {
        label: '吉林',
        value: 11,
        children: [],
    },
    {
        label: '吉林',
        value: 12,
        children: [],
    },

]

class Filter extends Component {
    state={
        type: 0,
        currentProvince: 1,
    }

    handleType = (v) => {
        this.setState((state) => {
            if(state.type === v) {
                return {
                    type: 0
                }
            }
            return {
                type: v
            }
        })
    }

    renderProvinces = (data) => {
        const { currentProvince } = this.state
        return (
            <ScrollView 
                scrollY
                scrollWithAnimation
                className="provinces">
                {
                    data.map(item => (
                    <View 
                    key={item.value}
                    className={`province-item ${ item.value === currentProvince ? 'active' : ''}`} 
                    onClick={() => this.setState({currentProvince: item.value})}>
                        {item.value === currentProvince ? (<View className="line" />) : null}
                        {item.label}
                    </View>
                    ))
                } 
            </ScrollView>
        )
    }

    renderCityColumns = children => (
        <Block>
            {
            children.length && children.map((item, index) => {
                let citys = null;
                if(( index + 1 ) % 3 !== 0 && index !== children.length -1 ) {
                    citys =  null;
                }
                if (( index + 1 ) % 3 === 0 ) {
                    citys =  (
                        <View className="city-column">
                            <View className="city-btn">{item[index-2].label}</View>
                            <View className="city-btn">{item[index-1].label}</View>
                            <View className="city-btn">{item.label}</View>
                        </View>
                    )
                }
                if(index === children.length -1 && ( index + 1 ) % 3 === 1) {
                    citys = (
                        <View className="city-column">
                            <View className="city-btn">{item.label}</View>
                        </View>
                    ) 
                }
                if(index === children.length -1 && ( index + 1 ) % 3 === 2) {
                    citys =  (
                        <View className="city-column">
                            <View className="city-btn">{item[index-1].label}</View>
                            <View className="city-btn">{item.label}</View>
                        </View>
                    ) 
                }
                return citys 
            })
        }
        </Block>
    )

    renderCitys = (data) => {
        if(data.currentProvince && data.popularProvince) {
            return (
                <Block>
                    <View className="city-card">
                        <View className="title">{item.currentProvince && item.currentProvince.label}</View>
                        <View className="city-card-content">
                            {
                                this.renderCityColumns(item.currentProvince.children)
                            }
                        </View>               
                    </View>
                    <View className="city-card">
                        <View className="title">{item.popularProvince && item.popularProvince.label}</View>
                        <View className="city-card-content">
                            {
                                this.renderCityColumns(item.popularProvince.children)
                            }
                        </View> 
                    </View>
                </Block>
            )
        }
        return (
            <View className="city-card">
                <View className="city-card-content">
                    {
                        this.renderCityColumns(data.children)
                    }
                </View>               
            </View> 
        )
    }

    render() {
        const { type } = this.state;
        return (
            <View className="filter">
                <View className="filter-header">
                    <View 
                    onClick={() => this.handleType(1)} 
                    className={`filter-btn ${ type === 1 ? 'btn-active' : '' }`}>
                        城市
                        <Text
                        className={`icon icon-arrow_bottom filter-icon ${ type === 1 ? 'icon-active' : '' }`}
                        />
                    </View>
                    <View
                    onClick={() => this.handleType(2)} 
                    className={`filter-btn ${ type === 2 ? 'btn-active' : '' }`}>
                        职位
                        <Text
                        className={`icon icon-arrow_bottom filter-icon ${ type === 2 ? 'icon-active' : '' }`}
                        />
                    </View>
                    <View 
                    onClick={() => this.handleType(3)} 
                    className={`filter-btn ${ type === 3 ? 'btn-active' : '' }`}>
                        筛选
                        <Text
                        className={`icon icon-arrow_bottom filter-icon ${ type === 3 ? 'icon-active' : '' }`}
                        />
                    </View>
                </View>
                <View className="filter-content-container">
                    <View className="filter-content-mask" />
                    <View className="filter-content">
                        {
                            this.renderProvinces(data)
                        }
                        <View className="city-content">
                            {
                                this.renderCitys(data[0])
                            }
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

export default Filter

期望行为
正常编译显示

报错信息

系统信息
System:
OS: macOS High Sierra 10.13.6
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm

• Taro 版本 [v1.3.2]
• 报错平台 [weapp]

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

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[luckyadam]

children 换个名字试试

[taro-bot]

CC @yuche

[yuche]

先用一个标签把 citys 包起来吧

    renderCityColumns = children => (
        <Block>
            {
            children.length && children.map((item, index) => {
                let citys = null;
                if(( index + 1 ) % 3 !== 0 && index !== children.length -1 ) {
                    citys =  null;
                }
                if (( index + 1 ) % 3 === 0 ) {
                    citys =  (
                        <View className="city-column">
                            <View className="city-btn">{item[index-2].label}</View>
                            <View className="city-btn">{item[index-1].label}</View>
                            <View className="city-btn">{item.label}</View>
                        </View>
                    )
                }
                if(index === children.length -1 && ( index + 1 ) % 3 === 1) {
                    citys = (
                        <View className="city-column">
                            <View className="city-btn">{item.label}</View>
                        </View>
                    ) 
                }
                if(index === children.length -1 && ( index + 1 ) % 3 === 2) {
                    citys =  (
                        <View className="city-column">
                            <View className="city-btn">{item[index-1].label}</View>
                            <View className="city-btn">{item.label}</View>
                        </View>
                    ) 
                }
                return <View>{citys}</View> 
            })
        }
        </Block>
    )