[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()

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
`

[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")
            }}

你可以试试看