React-Native种使用antd-mobile的Picker时出现的异常报错

场景：
在使用Picker组件时，修改用户的性别，后台的返回数据是这样的：

data:{
    code:1,
    gender:'男'
}

React-native界面是这样的：

import React from 'react'
import { View } from 'react-native'
import { List, InputItem, Picker } from 'antd-mobile'

export default class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state={
            gender:'女'
        }
        this.pickerData = [
            {
                label:'男',
                value:'男'
            },
            {
                label:'女',
                value:'女'
            }
        ]
    }
    render() {
        return (
            <View>
                <Picker data={this.pickerData} cols={1} 
                   value={this.state.gender}
                >
                   <List.Item arrow="horizontal">性别</List.Item>
                </Picker>
            </View>
        )
    }
}

页面加载后直接报错：

研究了一下发现Picker组件接收的value的类型是这样的：

所以要对后台传来的默认的性别进行处理，需要将String类型转化为Array类型，简单点的话我们可以直接使用ES6的Array.from()方法。

这是修改后的代码：

import React from 'react'
import { View } from 'react-native'
import { List, InputItem, Picker } from 'antd-mobile'

export default class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state={
            gender:'女'
        }
        this.pickerData = [
            {
                label:'男',
                value:'男'
            },
            {
                label:'女',
                value:'女'
            }
        ]
    }
    render() {
        return (
            <View>
                <Picker data={this.pickerData} cols={1} 
                   value={Array.from(this.state.gender)}
                   onChange={(v)=>{this.setState({gender:v})}}
                >
                   <List.Item arrow="horizontal">性别</List.Item>
                </Picker>
            </View>
        )
    }
}

这样就可以轻松解决这个报错，这个报错页提醒了我们，很多时候代码没有写错，但是可能数据类型出现了错误。