多层map下，dom没有重新渲染

[xiaofengz]

问题描述
[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]

复现步骤
[复现问题的步骤]

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

[或者可以直接贴源代码，能贴文字就不要截图]

const filterList = [
    {
        id: 0,
        name: '小区状态',
        value: 'status',
        children: [
            {
                text: '全部',
                value: 0
            }, {
                text: '正常',
                value: 1
            }, {
                text: '已死亡',
                value: 2
            }
        ]
    },
    {
        id: 1,
        name: '是否分配BD',
        value: 'isBD',
        children: [
            {
                text: '全部',
                value: 0
            }, {
                text: '已分配',
                value: 1
            }, {
                text: '未分配',
                value: 2
            }
        ]
    },
    {
        id: 2,
        name: '入驻来源',
        value: 'enterform',
        children: [
            {
                text: '全部',
                value: 0
            }, {
                text: 'BD入驻',
                value: 1
            }, {
                text: '邀请入住',
                value: 2
            }
        ]
    },
    {
        id: 3,
        name: '是否地推',
        value: 'isDitui',
        children: [
            {
                text: '全部',
                value: 0
            }, {
                text: '已地推',
                value: 1
            }, {
                text: '未地推',
                value: 2
            }
        ]
    }
]

onChangeItem(state, value) {
        console.log(state, value)
        this.setState({
            [state]: value
        })
    }

<View className='area-item-content'>
                            {filterList.map((item) => {
                                return (
                                    <View className='area-item-list-content' key={item.id}>
                                        <View style='color: #9BA2B7'>{item.name}</View>
                                        {
                                            item.children.map((vItem, index) => {
                                                console.log(this.state[item.value] === vItem.value)
                                                return (
                                                    <View className={this.state[item.value] === vItem.value ? 'area-item choosed' : 'area-item'} key={index} onClick={this.onChangeItem.bind(this, item.value, vItem.value)}>{vItem.text}{this.state[item.value] === vItem.value ? '0' : '1'}</View>
                                                )
                                            })
                                        }
                                    </View>
                                )
                            })}
                        </View>

期望行为
预期{this.state[item.value] === vItem.value ? '0' : '1'} 这里的代码会根据点击当前View而更新。
报错信息
dom没有变化，如下图，从console可以看出，state已经变化了,render函数也执行了，但是dom没有根据表达式更新。
[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。
Taro v1.2.2

Taro CLI 1.2.2 environment info:
System:
OS: macOS 10.14.2
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
npmPackages:
@tarojs/async-await: ^1.2.4 => 1.2.4
@tarojs/components: ^1.2.2 => 1.2.2
@tarojs/plugin-babel: ^1.2.2 => 1.2.2
@tarojs/plugin-csso: ^1.2.2 => 1.2.2
@tarojs/plugin-less: ^1.2.2 => 1.2.2
@tarojs/plugin-sass: ^1.2.4 => 1.2.4
@tarojs/plugin-uglifyjs: ^1.2.2 => 1.2.2
@tarojs/redux: ^1.2.2 => 1.2.2
@tarojs/redux-h5: ^1.2.2 => 1.2.2
@tarojs/router: ^1.2.2 => 1.2.2
@tarojs/taro: ^1.2.2 => 1.2.2
@tarojs/taro-alipay: ^1.2.2 => 1.2.2
@tarojs/taro-h5: ^1.2.2 => 1.2.2
@tarojs/taro-swan: ^1.2.2 => 1.2.2
@tarojs/taro-weapp: ^1.2.2 => 1.2.2
@tarojs/webpack-runner: ^1.2.2 => 1.2.2
eslint-config-taro: ^1.2.2 => 1.2.2
eslint-plugin-taro: ^1.2.2 => 1.2.2

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.0.0.64]
• Node.js 版本 [e.g. v9.0.0]
• 报错平台 [h5, weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]
单层map循环，没问题，两层map循环并且this.state[item.value] === vItem.value 这种写法有问题。dom没有变化

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

你这里有两个问题：

1. state 应该没有预先定义，全都是动态设置的，这样其实编译器就找不到你的 state。事实上你不应该把 1, 2, 3, 4 这样的键值放到 state，这样的模式在 state 下新开一个键值，然后你取值就从那个新的 state 取，例如：

onChangeItem(state, value) {
        console.log(state, value)
        this.setState({
            status: { [state]: value, ...this.state.status }
        })
    }

2. 循环中访问是 this.state.xx 是不行的，参考：使用map嵌套时，用this.state得到TypeError: Cannot read property 'file' of undefined #886 ，这个也应当写成 eslint 插件，编译没有警告成功。

[xiaofengz]

@yuche 谢谢解答，是由于你说的第一个的问题。这种情况是应该设计成一个state，改成你的写法已经解决～
好像不是第二个问题的原因？循环中取this.state.xx是可以的吧？我看了第二个问题是由于props和state设计重名的原因

[yuche]

循环中编译有一套复杂的处理机制，某些情况取是可以的，但更推荐的做法是把数据从 this.state 中取出来再用。