picker-view 受控模式下非正常用法会导致意外死循环

[19Qingfeng]

Version of antd-mobile

5.32.0

Operating system and its version

Others

Browser and its version

chrome 114.0.5735.198

Sandbox to reproduce

No response

What happened?

问题

<PickerView /> 在受控模式下如果传入一个不存在的值，同时 onChange 方法中并未更新受控值，会导致无限触发 onChange 方法造成死循环。

Demo

 const basicColumns = [
    [
      { label: '周一', value: 'Mon' },
      { label: '周二', value: 'Tues' },
      { label: '周三', value: 'Wed' },
      { label: '周四', value: 'Thur' },
      { label: '周五', value: 'Fri' },
    ],
    [
      { label: '上午', value: 'am' },
      { label: '下午', value: 'pm' },
    ],
  ]
  // components
  <PickerView
    value={[]}
    onChange={() => console.log('change change change')}
    columns={basicColumns}
    style={{ '--height': '500px', '--item-height': '2.8rem' }}
  />

方案

看上去像是 andt-m 中 picker 和 wheel 中有两个默认行为：

1. 当传入 value 表示受控但在 onchange 中并不会更新外部受控 value 时，会在用户滚动到特定位置后开启一个 1s 的定时器滚回对应 value 的位置。

src/components/picker-view/picker-view.tsx

2. 当传入的 value 并不在 column 中的数组中时，比如上边的 Demo 传入一个空数组。此时无论受控还是非受控都会默认匹配第一列进行回填：

src/components/picker-view/wheel.tsx

这两种方式单独使用起来没有什么问题，但是两种同时存在时配合上边的 Demo （受控传入的 value 不匹配 columns 时，同时未传入 onchange 或者 onchange 并未做任何受控 value 的更新）这就会导致无限死循环。

我定位到问题出现在这里：

src/components/picker-view/wheel.tsx

我不确定在 antd-m 中看来这是否是一个问题，毕竟这种用法算是一种相对 “错误” 的 case，如果有必要的话我可以提交一个 PR 来修复这个问题（在受控模式下，并不会进行不匹配后的默认选中第一个）。

更新

 <DatePickerView value={dayjs('1000-10-10').toDate()}  />

PickerView 的上层组件 DatePickerView 如果传入一个不存在的时间由于上述原因也会造成无限的死循环（无限触发 onchagne 函数）。

[bestphp2019]

这个问题官方有计划修复吗， 我也遇到了类似的问题

[VirusPC]

传入一个错误的value会导致无限触发 onchange 函数 + 1。

[Layouwen]

传入一个错误的value会导致无限触发 onchange 函数 + 1。

可以尝试提个pr，年底比较忙