react-native - Picker - undefined不是一个对象（评估＆＃39; this.props.children [position] .props）

Question

使用Picker时遇到了一种奇怪的行为。

我使用Picker如下：

<Picker
  mode="dropdown"
  style={styles.pickerField}
  selectedValue={this.state.dayAndTime}
  onValueChange={(text) => this.setState({ dayAndTime: text })}
>
  <Picker.Item label="Le 5/07 à 15H" value="0" key="0" />
</Picker>

当加载显示此选择器的屏幕时，我得到一个错误屏幕（参见下面的截图）：undefined不是对象（评估＆＃39; this.props.children [position] .props）

从我收集的内容来看，我的问题来自Libraries / Components / Picker / PickerAndroid.android.js的第106行，似乎有一个属性＆＃34; onValueChange＆＃34;触发它。我删除了它，错误没有发生。

我使用react-native 0.31.0，我使用了一个带有genymotion的android api 23虚拟设备。

有什么我做错的事吗？

Answer 1

必须至少有2个项目可供选择，例如： <Picker.Item label="Le 5/07 à 15H" value="0" key="0" /> <Picker.Item label="Le 5/07 à 15H" value="1" key="1" />

另外，为了获得更好的语法，您可以尝试： onValueChange={(dayAndTime) => this.setState({ dayAndTime })}

Answer 2

我有一个类似的问题，但它使用的是Item组件+数组。为了解决这个问题，我添加了一个空数组作为我的dataSource prop的默认值。就像那样：

<Picker style={styles.picker} mode="dropdown" { ...props }>
    <Picker.Item label="--- Select ---" value="" />
    {
        props.dataSource.map(({ label, value }) => (
            <Picker.Item key={value} label={label} value={value} />
        ))
    }
</Picker>

PickerWithLabel.defaultProps = {
    dataSource: []
};

Answer 3

 import {Picker} from '@react-native-picker/picker';
 <Picker
                  dropdownIconColor={colors.bColor}
                  selectedValue={formik.values.state}
                  onValueChange={value => changeValue('state', value)}>
                  <Picker.Item label={'Select State'} value="" />
                  {states ?                        states.map((item, index) => {
                      return (
                        <Picker.Item
                          key={index}
                          label={item.StateName}
                          value={item.StateName}
                        />
                      );
                    }):null}
                </Picker>


----------
If you return null when you don't have a array to render, It will solve the issue. But you need to provide that 
"<Picker.Item label={'Select State'} value="" />" for blank selected value.