[Picker] 多次打开后数据展示空白，但选择区仍可滑动选择（微信小程序）

[dodomore]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

3.0.10

平台

weapp

重现链接

https://codesandbox.io/p/sandbox/nutui-demo-9k2ppt?file=%2Fsrc%2Findex.html

重现步骤

1. 关闭后多次再次打开，偶现数据区域空白，但滑动选择仍然有效。
2. 选择后，onConfirm 能获取到正确数据。

期望的结果是什么？

每次打开 Picker，数据都应该正常显示

实际的结果是什么？

多次操作,数据区域空白（但选择功能正常）。

环境信息

👽 Taro v4.0.12

(node:20890) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. (Use node --trace-deprecation ... to show where the warning was created)

Taro CLI 4.0.12 environment info: System: OS: macOS 15.1 Shell: 5.9 - /bin/zsh Binaries: Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v22.12.0/bin/yarn npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm npmPackages: @tarojs/cli: 4.0.12 => 4.0.12 @tarojs/components: 4.0.12 => 4.0.12 @tarojs/helper: 4.0.12 => 4.0.12 @tarojs/plugin-framework-react: 4.0.12 => 4.0.12 @tarojs/plugin-platform-alipay: 4.0.12 => 4.0.12 @tarojs/plugin-platform-h5: 4.0.12 => 4.0.12 @tarojs/plugin-platform-harmony-hybrid: 4.0.12 => 4.0.12 @tarojs/plugin-platform-jd: 4.0.12 => 4.0.12 @tarojs/plugin-platform-qq: 4.0.12 => 4.0.12 @tarojs/plugin-platform-swan: 4.0.12 => 4.0.12 @tarojs/plugin-platform-tt: 4.0.12 => 4.0.12 @tarojs/plugin-platform-weapp: 4.0.12 => 4.0.12 @tarojs/react: 4.0.12 => 4.0.12 @tarojs/runtime: 4.0.12 => 4.0.12 @tarojs/shared: 4.0.12 => 4.0.12 @tarojs/taro: 4.0.12 => 4.0.12 @tarojs/taro-loader: 4.0.12 => 4.0.12 @tarojs/webpack5-runner: 4.0.12 => 4.0.12 babel-preset-taro: 4.0.12 => 4.0.12 eslint-config-taro: 4.0.12 => 4.0.12 react: ^18.0.0 => 18.3.1

其他补充信息

https://github.com/user-attachments/assets/33e12cb6-d3de-4dea-aef9-a19616723f16

获取高度失败: <TypeError: Cannot read properties of null (reading 'height')> TypeError: Cannot read properties of null (reading 'height') at https://usr/app-service.js:28282:49 at step (https://usr/app-service.js:33384:21) at Iterator.next (https://usr/app-service.js:33333:18) at asyncGeneratorStep (https://usr/app-service.js:32650:28) at _next (https://usr/app-service.js:32665:13)

[yujunfan]

设置下popup的高度 popupProps={{ style: { height: "300px", }, } }

[focus0802]

设置下popup的高度 popupProps={{ style: { height: "300px", }, } }

这个方法也不行，我的临时的解决办法是页面初始化时，setVisible打开一次picker，然后再关闭，当需要使用时再打开就正常了，不过会影响体验。期待修复。

[yujunfan]

给他指定下节点挂载，可以挂载在页面的最外层 popupProps={ { portal: () => document.getElementById("id"), style: { height: "300px", }, } }

[GuiltyKirito]

给他指定下节点挂载，可以挂载在页面的最外层 popupProps={ { portal: () => document.getElementById("id"), style: { height: "300px", }, } }

棒棒👍，雀食可以，已解决

[ZerlinM]

给他指定下节点挂载，可以挂载在页面的最外层 popupProps={ { portal: () => document.getElementById("id"), style: { height: "300px", }, } }

解决了，但我使用DatePicker时也遇到了这个问题，报错：获取高度失败: TypeError: Cannot read property 'height' of null，有解决方案吗

[dodomore]

给他指定下节点挂载，可以挂载在页面的最外层 popupProps={ { portal: () => document.getElementById("id"), style: { height: "300px", }, } }

棒棒👍，雀食可以，已解决

😭😭 还是不行,只是复现频率稍微少点

[dodomore]

只要用了 pickerview 组件都有这个异常

[yujunfan]

@dodomore 这个可能是有时没有获取到挂载节点的高度， 如果挂载节点的高度是固定的， 应该没问题

[dodomore]

@yujunfan 都试过了,重复20次多次点击必现 `import React, { useState } from 'react' import type { PickerOnChangeCallbackParameter, PickerOption, PickerOptions, PickerValue } from '@nutui/nutui-react-taro' import { Cell, Picker } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components'

const CITIES = [ [ { value: 1, label: '南京市111' }, { value: 2, label: '无锡市' }, { value: 3, label: '海北藏族自治区' }, { value: 4, label: '北京市' }, { value: 5, label: '连云港市' }, { value: 8, label: '大庆市' }, { value: 9, label: '绥化市' }, { value: 10, label: '潍坊市' }, { value: 12, label: '乌鲁木齐市' }, ], ]

const Demo1 = () => { const [visible, setVisible] = useState(false) const [selectedValue, setSelectedValue] = useState<PickerOption>()

const changePicker = ({ value, index, selectedOptions }: PickerOnChangeCallbackParameter) => { console.log('changePicker', value, index, selectedOptions) }

const confirmPicker = (options: PickerOptions, value: PickerValue[]) => { console.log('confirmPicker', options, value) setSelectedValue(options[0]) }

return ( <View id="picker" style={{ height: 300, }} > <Cell title="请选择城市" description={selectedValue?.label} onClick={() => setVisible(!visible)} /> <Picker title="请选择城市" visible={visible} options={CITIES} onConfirm={confirmPicker} onClose={() => setVisible(false)} onChange={changePicker} value={[selectedValue?.value ? selectedValue?.value : CITIES[0][0].value]} popupProps={{ portal: () => document.getElementById('picker'), style: { height: '300px', }, }} /> </View> ) } export default Demo1 `

[GuiltyKirito]

@yujunfan 都试过了,重复20次多次点击必现 `import React, { useState } from 'react' import type { PickerOnChangeCallbackParameter, PickerOption, PickerOptions, PickerValue } from '@nutui/nutui-react-taro' import { Cell, Picker } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components'

const CITIES = [ [ { value: 1, label: '南京市111' }, { value: 2, label: '无锡市' }, { value: 3, label: '海北藏族自治区' }, { value: 4, label: '北京市' }, { value: 5, label: '连云港市' }, { value: 8, label: '大庆市' }, { value: 9, label: '绥化市' }, { value: 10, label: '潍坊市' }, { value: 12, label: '乌鲁木齐市' }, ], ]

const Demo1 = () => { const [visible, setVisible] = useState(false) const [selectedValue, setSelectedValue] = useState()

const changePicker = ({ value, index, selectedOptions }: PickerOnChangeCallbackParameter) => { console.log('changePicker', value, index, selectedOptions) }

const confirmPicker = (options: PickerOptions, value: PickerValue[]) => { console.log('confirmPicker', options, value) setSelectedValue(options[0]) }

return ( <View id="picker" style={{ height: 300, }} > <Cell title="请选择城市" description={selectedValue?.label} onClick={() => setVisible(!visible)} /> <Picker title="请选择城市" visible={visible} options={CITIES} onConfirm={confirmPicker} onClose={() => setVisible(false)} onChange={changePicker} value={[selectedValue?.value ? selectedValue?.value : CITIES[0][0].value]} popupProps={{ portal: () => document.getElementById('picker'), style: { height: '300px', }, }} /> ) } export default Demo1 `

已经解决了吗？如果还没解决，这个 document 要 从 runtime库里引用出来试试看？

[GuiltyKirito]

@yujunfan 都试过了,重复20次多次点击必现 `import React, { useState } from 'react' import type { PickerOnChangeCallbackParameter, PickerOption, PickerOptions, PickerValue } from '@nutui/nutui-react-taro' import { Cell, Picker } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components'

const CITIES = [ [ { value: 1, label: '南京市111' }, { value: 2, label: '无锡市' }, { value: 3, label: '海北藏族自治区' }, { value: 4, label: '北京市' }, { value: 5, label: '连云港市' }, { value: 8, label: '大庆市' }, { value: 9, label: '绥化市' }, { value: 10, label: '潍坊市' }, { value: 12, label: '乌鲁木齐市' }, ], ]

const Demo1 = () => { const [visible, setVisible] = useState(false) const [selectedValue, setSelectedValue] = useState()

const changePicker = ({ value, index, selectedOptions }: PickerOnChangeCallbackParameter) => { console.log('changePicker', value, index, selectedOptions) }

const confirmPicker = (options: PickerOptions, value: PickerValue[]) => { console.log('confirmPicker', options, value) setSelectedValue(options[0]) }

return ( <View id="picker" style={{ height: 300, }} > <Cell title="请选择城市" description={selectedValue?.label} onClick={() => setVisible(!visible)} /> <Picker title="请选择城市" visible={visible} options={CITIES} onConfirm={confirmPicker} onClose={() => setVisible(false)} onChange={changePicker} value={[selectedValue?.value ? selectedValue?.value : CITIES[0][0].value]} popupProps={{ portal: () => document.getElementById('picker'), style: { height: '300px', }, }} /> ) } export default Demo1 `

具体使用方法是：

import { document } from '@tarojs/runtime';

 popupProps={{
              style: {height: "300px"}, 
              portal: (e) => document.getElementById("form1")
            }}

你可以试试看

[Darcrandex]

同样的问题，但我的情况是 DatePicker 作为 Form.Item 的子组件时会报错。 请及时处理。

[kkkkkwong]

import { document } from '@tarojs/runtime';

popupProps={{ style: {height: "300px"}, portal: (e) => document.getElementById("form1") }}

同款问题，尝试过以上的方法，没有解决

[dshuais]

@yujunfan 都试过了,重复20次多次点击必现 `import React, { useState } from 'react' import type { PickerOnChangeCallbackParameter, PickerOption, PickerOptions, PickerValue } from '@nutui/nutui-react-taro' import { Cell, Picker } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components'

const CITIES = [ [ { value: 1, label: '南京市111' }, { value: 2, label: '无锡市' }, { value: 3, label: '海北藏族自治区' }, { value: 4, label: '北京市' }, { value: 5, label: '连云港市' }, { value: 8, label: '大庆市' }, { value: 9, label: '绥化市' }, { value: 10, label: '潍坊市' }, { value: 12, label: '乌鲁木齐市' }, ], ]

const Demo1 = () => { const [visible, setVisible] = useState(false) const [selectedValue, setSelectedValue] = useState()

const changePicker = ({ value, index, selectedOptions }: PickerOnChangeCallbackParameter) => { console.log('changePicker', value, index, selectedOptions) }

const confirmPicker = (options: PickerOptions, value: PickerValue[]) => { console.log('confirmPicker', options, value) setSelectedValue(options[0]) }

return ( <View id="picker" style={{ height: 300, }} > <Cell title="请选择城市" description={selectedValue?.label} onClick={() => setVisible(!visible)} /> <Picker title="请选择城市" visible={visible} options={CITIES} onConfirm={confirmPicker} onClose={() => setVisible(false)} onChange={changePicker} value={[selectedValue?.value ? selectedValue?.value : CITIES[0][0].value]} popupProps={{ portal: () => document.getElementById('picker'), style: { height: '300px', }, }} /> ) } export default Demo1 `

请问这个问题你找到解决方案了吗？