import React , { useState , useEffect } from 'react' ; import { useSelector , useStore } from 'react-redux' ; import { loadCountries } from '@app/redux/actions/countries' ; import { getCountries } from '@app/redux/reducers/countries' ; import './style.scss' ; interface Props { onChange : ( s : string ) => void ; } export default function ( { onChange } ) { const [ value , setValue ] = useState ( '' ) ; const countries = useSelector ( ( state ) => getCountries ( state ) ) ; const store = useStore ( ) ; const _loadCountries = ( args ? ) => loadCountries ( args ) ( store . dispatch , store . getState ) ; useEffect ( ( ) => { if ( ! value ) { setValue ( '+86' ) ; onChange ( '+86' ) ; } if ( countries . length == 0 ) _loadCountries ( ) ; } ) ; return ( < select styleName = "select" defaultValue = { value } onChange = { ( e ) => onChange ( e . target . value ) } > { countries . map ( ( item ) => { return ( < option key = { item . abbr } value = { item . code } > { item . name } { item . code } < /option>); } ) } < /select>); }