taro next 支付宝 picker 组件 无法正常使用

[psaren]

问题描述

taro next 支付宝 picker 组件 无法正常使用

复现步骤

1. taro init react-project
2. 打开 pages/index/index.tsx
3. 按照官网示例 picker, 添加代码
4. 构建 npm run build:alipay

import React, { Component } from 'react'
import { View, Button, Text, Picker } from '@tarojs/components'
import { connect } from 'react-redux'

import { add, minus, asyncAdd } from '../../actions/counter'

import './index.scss'
type PageStateProps = {
  counter: {
    num: number
  }
}

type PageDispatchProps = {
  add: () => void
  dec: () => void
  asyncAdd: () => any
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps;
}
class Index extends Component {
+  state = {
+    selector: ['美国', '中国', '巴西', '日本'],
+    selectorChecked: '美国',
+  }
  UNSAFE_componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

+  onChange = e => {
+    this.setState({
+      selectorChecked: this.state.selector[e.detail.value]
+    })
+  }

  render () {
    return (
      <View className='index'>
        <Button className='add_btn' onClick={this.props.add}>+</Button>
        <Button className='dec_btn' onClick={this.props.dec}>-</Button>
        <Button className='dec_btn' onClick={this.props.asyncAdd}>async</Button>
        <View><Text>{this.props.counter.num}</Text></View>
        <View><Text>Hello, World</Text></View>
         <Text>地区选择器</Text>
+          <View>
+             <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
+               <View className='picker'>
+                当前选择：{this.state.selectorChecked}
+              </View>
+            </Picker>
+          </View>
      </View>
    )
  }
}

期望行为

Picker组件可正常使用

报错信息

没有报错信息，组件未能正常显示出来

系统信息

$ taro info
👽 Taro v3.0.0-rc.6

Taro CLI 3.0.0-rc.6 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.16.3 - D:\Program Files\nodejs\node.EXE
Yarn: E:\study\applets\next\taro-react>"D:\Program Files\nodejs\node.exe" "D:\Program Files\nodejs\node_modules\yarn\bin\yarn.js" -v
1.17.3 - D:\Program Files\nodejs\yarn.CMD
npm: 6.9.0 - D:\Program Files\nodejs\npm.CMD

在这个 #6594 issue 下会出现报错，现在已无报错，但仍然无法正常使用

[liujiayii]

我这里报警告，页面都出不来

[honlyHuang]

@psaren 看见大佬在物料市场里提交了 taro-ui-vue ，求大佬微信号

[psaren]

@honlyHuang
Ace_Joseph

[wittech]

Picker's child must be an element: <view>

[Junzibuzhengyibuqi]

还没解决吗 大佬们

[Chen-jj]

支付宝 picker 的 children 只能为一个节点。

目前 for 循环了一堆 view 所以跪了：

下个版本会给 picker 首先套一个 view 节点：

[lrfun]

taro 3.0.5 支付宝小程序 Picker无法正常使用组件，页面无法渲染