index.js

import React, { Component } from 'react'
import { Picker} from 'antd-mobile';
import styles from  './SelectPicker.css';
import {getPlanInListWithCode} from '../../utils/dataFilter'

class SelectPicker extends Component {
  constructor(props) {
     console.log('---------constructor------->',props)
    super(props);
    this.state = {
      List: props.List,
      value: props.value || 0,
      selectIndex:0
    }
  }
  componentWillReceiveProps(nextProps){
    console.log('---------SelectPicker--------componentWillReceiveProps------------nextProps------->',nextProps)
    if(nextProps.List != this.state.List){
       this.setState({
          List:nextProps.List,
        })
    }
  }
  render() {
    const { List,value,selectIndex} = this.state;
    let len = List.length;
    let value2 = value;
    console.log('---------SelectPicker--------value2------->',value2,List,getPlanInListWithCode('value',value2,List).label)
    let labelText = '';
    if(value2 == 0 || value2){
      labelText = getPlanInListWithCode('value',value2,List).label;
    }else{
      value2 = len-1;
      labelText = List[len-1].label;
    }
    if(!getPlanInListWithCode('value',value2,List).label){
      value2 = len-1;
      labelText = List[len-1].label;
    }
    console.log('---------SelectPicker--------2222222----->',value2,labelText)
    return (
      <Picker
            data={List}
            cols={1}
            value={[value2]}
            onChange={
              v => {
                this.setState({
                  value: List[v[0]].value,
                  label:List[v[0]].label,
                  selectIndex:v[0],
                });
                console.log('-------Picker----onchange------>',v)
                this.props.selectChange(List[Number(v[0])])
              }
            }
          >
        <div className={styles.choose} ><span>{labelText}</span></div>
      </Picker>
    )
  }
}

export default SelectPicker