reactV6，引入V5.22里的List和Picker，点击List后没有弹出Picker的内容？

[ken428965]

已写的代码：

// 户型数据
const roomTypeData = [
  { label: '一室', value: 'ROOM|jdfxur3484fd' },
  { label: '二室', value: 'ROOM|rudjur4846fd' }
]
const RentAdd = () => {
    const [value, setValue] = useState('')
    const [visible, setVisible] = useState(false)
    const [roomType,setRoomType] = useState('')
useEffect(()=>{
  setVisible(true)
},[])
// 获取表单数据
  const getValue = (name, value) => {
    setCommunity([name] = value)
  }
return (
<List>
  <List.Item
            extra='请选择'
            arrow={true}
            onClick={() => {
              <Picker
                columns={roomTypeData}
                visible={visible}
                value={[roomType]}
                mouseWheel={true}
                // onChange={val => {setValue(setRoomType(getValue('roomType', val[0])))}}
                onClose={() => {setVisible(false)}}
                onConfirm={v => {setValue(v)}}
              />
            }}
          >
            户       型
    List.Item>
List>
)
}

目前效果是，点击列表时，列表的背景颜色变成深灰色，然而没有弹出弹窗，chrome浏览器没有报错，审查元素里也看不到与Picker弹窗相关的标签

请问代码出了什么问题？如何解决？请展示代码举例说明。

[miracles1919]

你的用法有问题，你的点击事件里怎么是个 Picker 组件?

<List.Item
  onClick={
    // 这里有问题...
    <Picker />
 }
/>

建议改成这样

return (
  <List>
    <List.Item onClick={() => setVisible(true)}/>
    <Picker visible={visible}/>
  </List>
)

[miracles1919]

我这是简写... 原本你的那些 props 还是要加上去的

[ken428965]

抱歉，是我没有说清楚我是为了方便快捷才这样把代码贴出来的
改完后的完整代码如下：

// 户型数据
const roomTypeData = [
  { label: '一室', value: 'ROOM|jdfxur3484fd' },
  { label: '二室', value: 'ROOM|rudjur4846fd' }
]
const RentAdd = () => {
    const [value, setValue] = useState('')
    const [visible, setVisible] = useState(false)
    const [roomType,setRoomType] = useState('')
useEffect(()=>{
  setVisible(true)
},[])
// 获取表单数据
  const getValue = (name, value) => {
    setCommunity([name] = value)
  }
return (
<List>
  <List.Item
            extra='请选择'
            arrow={true}
            onClick={() => setVisible(true)}
          >
            户       型
    List.Item>
            <Picker
                columns={roomTypeData}
                visible={visible}
                value={[roomType]}
                mouseWheel={true}
                // onChange={val => {setValue(setRoomType(getValue('roomType', val[0])))}}
                onClose={() => {setVisible(false)}}
                onConfirm={v => {setValue(v)}}
              />
List>
)
}

浏览器报错：
Uncaught TypeError: column.map is not a function
at columns-extend.js:6:1
at Array.map ()
at columns-extend.js:6:1
at with-cache.js:5:1
at get columns [as columns] (columns-extend.js:22:1)
at picker-view.js:40:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateFunctionComponent (react-dom.development.js:19588:1)
at updateSimpleMemoComponent (react-dom.development.js:19425:1)
at updateMemoComponent (react-dom.development.js:19284:1)

[miracles1919]

你看下官网 columns 的定义和 demo；columns 是个二维数组

[ken428965]

感谢提醒~~~
原来是二维数组
原代码是一维数组，把它改为二维数组后：

const roomTypeData = [[
  { label: '一室', value: 'ROOM|jdfxur3484fd' },
  { label: '二室', value: 'ROOM|rudjur4846fd' }
],
[],
]

问题依旧。。。

[ken428965]

试过把内容加进去：

const roomTypeData = [[
  { label: '一室', value: 'ROOM|jdfxur3484fd' },
  { label: '二室', value: 'ROOM|rudjur4846fd' }
],
[{ label: '二室', value: 'ROOM|jdfxur3484fd' },
  { label: '一室', value: 'ROOM|rudjur4846fd' }],
]

问题依旧