reactV6，引入antd mobile V5.22里的List和Picker的实现效果问题

[ken428965]

// 房屋类型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a692' },
  { label: '二室', value: 'ROOM|d1a003' },
  { label: '三室', value: 'ROOM|20903a' },
  { label: '四室', value: 'ROOM|ce2a5d' },
  { label: '四室+', value: 'ROOM|2731c' }
]
// 朝向：
const orientedData = [
  { label: '东', value: 'ORIEN|141b98' },
  { label: '西', value: 'ORIEN|103fb3' },
  { label: '南', value: 'ORIEN|61e994' },
  { label: '北', value: 'ORIEN|caa6f8' },
  { label: '东南', value: 'ORIEN|dfb1b3' },
  { label: '东北', value: 'ORIEN|67ac22' },
  { label: '西南', value: 'ORIEN|2354e8' },
  { label: '西北', value: 'ORIEN|80795f' }
]
// 楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]
const RentAdd = () => {
      function Huxing() {
  return (
    <>
      <Picker
        columns={[roomTypeData]}
        visible={visible}
        value={[roomType]}
        mouseWheel={true}
        onClose={() => {setVisible(false)}}
        onConfirm={v => {setValue(v)}}
      />
    </>
  )
}
function Suozailouceng() {
  return (
    <>
      <Picker
        columns={[floorData]}
        visible={visible}
        value={[floor]}
        mouseWheel={true}
        onClose={() => {setVisible(false)}}
        onConfirm={v => {setValue(v)}}
      />
    </>
  )
}
function Chaoxiang() {
  return (
    <>
      <Picker
        columns={[orientedData]}
        visible={visible}
        value={[oriented]}
        mouseWheel={true}
        onClose={() => {setVisible(false)}}
        onConfirm={v => {setValue(v)}}
      />
    </>
  )
}
return (
      <List>
         // 房型
         <List.Item
            extra='请选择'
            arrow={true}
            onClick={() => {
              setVisible(true)
            }}
          >
            {Huxing()}
            户       型
          </List.Item>
          // 朝向
          <List.Item
            extra='请选择'
            arrow={true}
            onClick={() => {
              setVisible(true)
            }}
          >
            {Suozailouceng()}
            所在楼层
          </List.Item>
          // 楼层
          <List.Item
            extra='请选择'
            arrow={true}
            onClick={() => {
              setVisible(true)
            }}
          >
            {Chaoxiang()}
            朝       向
          </List.Item>
      </List>
)
}

希望实现效果如下，点击三项中的其中一项，界面底部随即向上弹出对应的列表数据

目前效果是，点击任意一项后，界面底部向上弹出对应的列表数据，然而此列表数据只显示出与朝向相关的数据，其余两项数据均没有显示，同时遮罩层的颜色非常深

试过使用三元表达式{!Huxing() || !Suozailouceng() ? Chaoxiang() : ''}来实现点击其中一项只显示对应的列表效果，然而没有生效。
请问代码出了什么问题？解决办法是什么？请展示代码举例说明。

[miracles1919]

你的 Picker 用的都是同一个 visible 变量，那当然会这样了...
从你以前的提问来看，我觉得你对 react 的使用非常不熟练，建议你把官网的 demo 先自己敲一遍

---

另外 React V6 是啥 。。

[ken428965]

是react-router-domV6。
是的，我确实非常不熟练，是因为开始学react和antd mobile的使用不久，再者我也没有机会参加系统的学习，只是单纯地对写代码感兴趣，所以会在学习过程中跌跌碰碰。
感谢您的善意指正~回头我再研究一下demo~~~

[ken428965]

把三个visible和value改成三个不同的名字后，问题解决了~~~
再次感谢您的指点~~~