Picker 组件在 multiSelector 模式时列数与 range 数组长度不一致

[CyberNika]

问题描述

微信小程序端，Picker 组件在 multiSelector 模式时，当 range 数组长度发生变化时，UI 上并没有发生相应变化。如下图和下面代码所示，选择 A 时，range 数组长度为 3，B 时，range 数组长度为 2，但实际上两种情况 UI 上都是有三列

复现步骤

import Taro, { useState, useCallback, useMemo } from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'

const FIRST = ['A', 'B']
const SECOND = [2019, 2020, 2011]
const THIRD = [1, 2, 3]

const Index = () => {
  const [selected, setSelected] = useState([])

  const handleColumnChange = useCallback((evt) => {
    const { column, value } = evt.detail
    const newValue = [
      ...selected.slice(0, column),
      value,
    ]

    setSelected(newValue)
  }, [selected])

  const options = useMemo(() => {
    if (selected[0]) {
      return [
        FIRST,
        SECOND,
      ]
    }

    return [
      FIRST,
      SECOND,
      THIRD,
    ]
  }, [selected])

  console.log('options', options)

  return (
    <View style={{ marginTop: '120rpx' }}>
      <Picker
        mode='multiSelector'
        onColumnChange={handleColumnChange}
        range={options}
      >
        <View class='picker'>
          请选择
        </View>
      </Picker>
    </View>
  )
}

export default Index

期望行为

选择 A 时展示三列，选择 B 时展示两列

系统信息

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

$ taro info
👽 Taro v1.3.21


  Taro CLI 1.3.21 environment info:
    System:
      OS: macOS High Sierra 10.13.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.3 - /usr/local/bin/node
      npm: 6.4.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 1.3.22 => 1.3.22
      @tarojs/plugin-babel: 1.3.22 => 1.3.22
      @tarojs/plugin-csso: 1.3.22 => 1.3.22
      @tarojs/plugin-sass: 1.3.22 => 1.3.22
      @tarojs/plugin-uglifyjs: 1.3.22 => 1.3.22
      @tarojs/router: 1.3.22 => 1.3.22
      @tarojs/taro: 1.3.22 => 1.3.22
      @tarojs/taro-alipay: 1.3.22 => 1.3.22
      @tarojs/taro-h5: 1.3.22 => 1.3.22
      @tarojs/taro-swan: 1.3.22 => 1.3.22
      @tarojs/taro-tt: 1.3.22 => 1.3.22
      @tarojs/taro-weapp: 1.3.22 => 1.3.22
      @tarojs/webpack-runner: 1.3.22 => 1.3.22
      eslint-config-taro: 1.3.22 => 1.3.22
      eslint-plugin-taro: 1.3.22 => 1.3.22
      nerv-devtools: ^1.5.3 => 1.5.3
      nervjs: ^1.5.3 => 1.5.3

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[taro-bot]

CC @Chen-jj

[CyberNika]

这个有具体的计划吗？

[Chen-jj]

@heynext 这样吧

const options = useMemo(() => {
    if (selected[0]) {
      return [
        FIRST,
        SECOND,
        []
      ]
    }

    return [
      FIRST,
      SECOND,
      THIRD,
    ]
  }, [selected])

[Chen-jj]

@heynext 写了个原生例子如下。

应该是直接在 bindcolumnchange 里 setData [FIRST, SECOND] 不能立即改变 picker 视图，缩小 picker 后再打开才会变化。

而 setData [FIRST, SECOND, []] 能解决这个问题，也就是我上一条回答。

bindtap 里 setData [FIRST, SECOND]，再打开 picker 也可以，证明应该没猜错。

Component({
  data: {
    options: [
      ['A', 'B'],
      [2019, 2020, 2011],
      [1, 2, 3]
    ]
  },
  methods: {
    anonymousFunc0 (e) {
      console.log('ok: ', e)
      if (e.detail.column === 0 && e.detail.value === 1) {
        console.log('setData')
        this.setData({
          options: [
            ['A', 'B'],
            [2019, 2020, 2011]
          ]
        })
      }
    },
    onClick () {
      console.log('c')
      this.setData({
        options: [
          ['A', 'B'],
          [2019, 2020, 2011]
        ]
      })
    }
  }
})

<view>
    <picker mode="multiSelector" bindcolumnchange="anonymousFunc0" range="{{options}}">
        <view class="picker">请选择</view>
    </picker>
    <view bindtap="onClick">click</view>
</view>