Picker 组件 multiSelector 类型 下 无法动态设置 range。不触发onColumnChange事件

[hirozhuz]

相关平台

百度小程序

复现仓库

https://github.com/hirozhuz/taro-bug-2020-09-23.git
小程序基础库: 3.190.255-rc
使用框架: React

复现步骤

点击 yes -> 选择不同的项

期望结果

在 column 切换时触发onColumnChange事件，修改 range

实际结果

当在onColumnChange事件回调中使用setState去修改range时，onColumnChange只触发一次，并且未更改range。下次触发Picker组件时才生效。

环境信息

 Taro CLI 3.0.9 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
      Yarn: 1.22.5 - /usr/local/bin/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
    npmPackages:
      @tarojs/components: 3.0.9 => 3.0.9 
      @tarojs/mini-runner: 3.0.9 => 3.0.9 
      @tarojs/react: 3.0.9 => 3.0.9 
      @tarojs/runtime: 3.0.9 => 3.0.9 
      @tarojs/taro: 3.0.9 => 3.0.9 
      @tarojs/webpack-runner: 3.0.9 => 3.0.9 
      babel-preset-taro: 3.0.9 => 3.0.9 
      eslint-config-taro: 3.0.9 => 3.0.9 
      react: ^16.10.0 => 16.13.1 

[Yana5417]

3.0.21这个问题又复现了

[net900621]

请问这个问题有解决方法么

[Chen-jj]

没有复现。目测楼主没有在 onColumnChange 时设置受控 picker 的 value。

原 Demo 修改后的代码：

import React, {Component} from 'react'
import {View, Text, Picker} from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  state = {
    testList: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    value: [0, 0, 0]
  }


  handleChange = (...arg) => {
    console.log('change', this.state.testList)
  }

  handleColumnChange = (e) => {
    const {column, value} = e.detail

    const multiArray = [...this.state.testList]
    const multiIndex = [...this.state.value]
    multiIndex[column] = value

    switch (column) {
      case 0:
        switch (multiIndex[0]) {
          case 0:
            multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
            multiArray[2] = ['猪肉绦虫', '吸血虫'];
            break;
          case 1:
            multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
            multiArray[2] = ['鲫鱼', '带鱼'];
            break;
        }
        multiIndex[1] = 0;
        multiIndex[2] = 0;
        break;
      case 1:
        switch (multiIndex[0]) {
          case 0:
            switch (multiIndex[1]) {
              case 0:
                multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                multiArray[2] = ['蛔虫'];
                break;
              case 2:
                multiArray[2] = ['蚂蚁', '蚂蟥'];
                break;
              case 3:
                multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                break;
              case 4:
                multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                break;
            }
            break;
          case 1:
            switch (multiIndex[1]) {
              case 0:
                multiArray[2] = ['鲫鱼', '带鱼'];
                break;
              case 1:
                multiArray[2] = ['青蛙', '娃娃鱼'];
                break;
              case 2:
                multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                break;
            }
            break;
        }
        multiIndex[2] = 0;
        break;
    }
    console.log('handleColumnChange', multiIndex, multiArray)
    this.setState({
      value: multiIndex,
      testList: multiArray
    })
  }


  render() {
    const {testList, value} = this.state
    return (
      <View className='index'>
        <Picker mode='multiSelector'
                range={testList}
                onChange={this.handleChange}
                onColumnChange={this.handleColumnChange}
                value={value}
        >
          <View className='result-list-page__picker-title'>
            yes
          </View>
        </Picker>
      </View>
    )
  }
}

结果：

2022-06-02.3.21.16.mov

[net900621]

get，检查后发现我也是因为自己代码的逻辑问题

[HappyYawen]

我也遇到相同的问题了，情况不太一样，切换第一列时，第二列也变化了，但是内容没有变完整，还有保留上一次的部分数据在列表中，请问怎么解决
`import React, {Component} from 'react'
import {View, Text, Picker} from '@tarojs/components'
import './index.scss'

export default class PickerCity extends Component {
state = {
value: [0, 0],
rangeData: []
}

componentDidUpdate(prevProps) {
// 检查props的变化
if (this.props.data !== prevProps.data) {
// 执行相应的操作
console.log("chushihua------>",this.props.data)
this.setState({
rangeData: [[...this.props.data.slice(0).map(i=>i.name)], [...this.props.data[0].businessList.slice(0).map(j=>j.name.split('/')[0])]]
})
}
}
handleChange = (...arg) => {
console.log('change', this.state.rangeData)
}

handleColumnChange = (e) => {
const {column, value} = e.detail

const multiArray = [this.state.rangeData[0].slice(0),this.state.rangeData[1].slice(0)]
const multiIndex = [...this.state.value]
multiIndex[column] = value
switch (column) {
  case 0:
    multiArray[1] = []
    this.props.data[multiIndex[0]].businessList.slice(0).forEach(j=>{
      multiArray[1].push(j.name)
    })
    multiIndex[1] = 0;
    break;
}
console.log('handleColumnChange', multiIndex, multiArray)
this.setState({
  value: multiIndex,
  rangeData: multiArray
})

}

render() {
const {rangeData, value} = this.state
return (



yes



)
}
}
`

Uploading Screen Recording 2024-01-27 at 21.34.00.mov…