Taro: Picker组件关于异步设定 range与value问题

Created on 17 Apr 2019 · 4Comments · Source: NervJS/taro

问题描述
目前使用的taro版本是 1.2.26，以下是代码清单。

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

初始化picker，同时range 与 value(位置: 3) 初始化
2.“ 点击更新Picker(a->aa)” 这个时候 range 与 value(位置: 1)发生变更，
error: 这个时候的Picker是停留在位置3。

// 这里可以贴代码

import Taro, { Component } from '@tarojs/taro';

import { View, Text, Picker } from '@tarojs/components'

import './test.scss';

class Test extends Component {

  constructor(props) {
    super(props);
    this.validType = '';
    let SID = 2;
    let selector = [
      {value:'a', key:1},
      {value:'b', key:2},
      {value:'c', key:3},
      {value:'d', key:4},
    ];

    this.state = {
      selector:selector,
      sid: SID,
      selectorChecked:selector[SID].value
    };
  }

  onChange(e){
    console.log(e.detail.value);
    this.setState({
      selectorChecked: this.state.selector[e.detail.value].value
    });
  }

  handleClick(){
    let selector = [
      {value:'aa', key:5},
      {value:'bb', key:6},
      {value:'cc', key:7},
      {value:'dd', key:8},
    ];
    let SID = 1;

    this.setState({
      selector:selector,
      sid: SID,
      selectorChecked:selector[SID].value
    });
  }

  render() {

    return (
      <View className='test'>
          <View className='page-section'>
            <Text onClick={this.handleClick.bind(this)}>点击更新Picker(a->aa)</Text>
            <View>
              <Picker mode='selector' range={this.state.selector} value={this.state.sid} rangeKey='value' onChange={this.onChange.bind(this)}>
                <View className='picker'>
                  当前选择：{this.state.selectorChecked}
                </View>
              </Picker>
            </View>
           </View>
      </View>
    );
  }
}

export default Test;

期望行为
像这种情况如何处理？能不能直接把Picker销毁，再重新重新实例化，变成新值range与value.

系统信息