Get selected value I inserted to dropdown when I'm editing the client form

问题

I need to get the value from Client Form I inserted. e.g

nationalities:["english","french","american"]

The expected output is for example, I selected american, then I see american in nationality dropdown field when I'm editing client form.

But the actual result is the first element from the dropdown is always selected, english in this case.

I need to access the selected value from dropdown when I'm editing the client form. This is my code:

 componentWillReceiveProps = nextProps =>
   {
    // Load Contact Asynchronously
    const
    {
        client
    } = nextProps;
    if (client._id !== this.props.client._id)
    {
        // Initialize form only once
        this.props.initialize(client);
        this.isUpdating = true;
    }
   };
   componentDidMount()
   {

    this.props.searchNationalitiesToInsertClient();
   }



   constructor(props)
   {
    super(props);

    this.state = {
        nacionality: ''
    };
   }

   onChange = (e) =>
   {
    this.setState(
    {
        nacionality: e.target.value
    })
   }

   renderNacionalities = (
    {
        meta:
        {
            error
        },
        input
    }) =>
    {

        return ( <
            div className = "col-md-4 mb-3" >
            <
            label > Nacionality: < /label>

            <
            Field className = "custom-select d-block w-100"
            name = "nacionality"
            value = {
                this.state.nacionality
            }
            onChange = {
                this.onChange.bind(this)
            }
            component = "select"
            placeholder = {
                !input.value ? 'Please, insert a 
                nationality ' : input.value}>


                {
                    this.props.nationalities.map(nacionality =>
                    {

                        return ( <
                            option key = {
                                nacionality._id
                            }
                            value = {
                                nacionality._id
                            } >
                            {
                                nacionality.country
                            } < /option>
                        )
                    })
                }

                <
                /Field>

                {
                    error && < p className = "error" >
                        {
                            error
                        } < /p>}

                        <
                        /div>

                );
            }


            render()
            {
                const
                {
                    handleSubmit,
                    loading,
                    pristine,
                    reset,
                    submitting
                } = this.props;

                if (loading)
                {
                    return <span > Loading... < /span>;
                }

                return ( <
                    form onSubmit = {
                        handleSubmit
                    } >
                    <
                    div className = 'row'
                    style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } >
                    <
                    Field name = 'name'
                    type = 'text'
                    component = {
                        TextField
                    }
                    placeholder = '...Name'
                    label = 'Name' /
                    >
                    <
                    Field name = 'email'
                    type = 'text'
                    component = {
                        TextField
                    }
                    placeholder = '...Email'
                    label = 'Email' /
                    >
                    <
                    Field name = 'cuil'
                    type = 'text'
                    component = {
                        RenderField
                    }
                    placeholder = '...Cuil'
                    label = 'Cuil' /
                    >
                    <
                    /div> <
                    div className = 'row'
                    style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } >
                    <
                    Field name = 'phoneNumber'
                    type = 'number'
                    component = {
                        RenderFieldNumeric
                    }
                    placeholder = '...PhoneNumber'
                    label = 'PhoneNumber' /
                    >
                    <
                    /div> <
                    div className = 'row'
                    style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } >
                    <
                    Field name = 'nacionality'
                    component = {
                        this.renderNacionalities
                    }
                    placeholder = '...nacionality'
                    label = 'Nacionality' /
                    >
                    <
                    /div>

                    <
                    div style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } > < b > Direction < /b></div >
                    <
                    div className = 'row'
                    style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } >
                    <
                    Field name = 'direction.street'
                    type = 'text'
                    component = {
                        TextField
                    }
                    placeholder = '...Street'
                    label = 'street' /
                    >
                    <
                    Field name = 'direction.number'
                    type = 'number'
                    component = {
                        RenderFieldNumeric
                    }
                    placeholder = '...Number'
                    label = 'number' /
                    >
                    <
                    /div> <
                    div className = 'row'
                    style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } >
                    <
                    Field name = 'direction.floor'
                    type = 'text'
                    component = {
                        TextField
                    }
                    placeholder = '...Floor'
                    label = 'floor' /
                    >
                    <
                    Field name = 'direction.department'
                    type = 'text'
                    component = {
                        RenderField
                    }
                    placeholder = '...Department'
                    label = 'departament' /
                    >
                    <
                    /div> <
                    div className = 'row'
                    style = {
                        {
                            textAlign: 'center',
                            justifyContent: 'center',
                            paddingRight: 20,
                            margin: '10 10px 10 10px'

                            // alignItems: 'center',
                        }
                    } >
                    <
                    Link className = 'btn btn-light mr-2'
                    to = '/clients' >
                    Cancel <
                    /Link> <
                    button className = 'btn btn-primary mr-2'
                    type = 'submit' >
                    {
                        this.isUpdating ? 'Updating' : 'Creating'
                    } <
                    /button> <
                    /div> <
                    /form>
                );
            }
        }

        function mapState(state)
        {

            return {
                nationalities: state.nacionalitiesDs.nationalities
            }
        }

        const actions = {
            searchNationalitiesToInsertClient
        };

        ClientForm = connect(mapState, actions)(ClientForm);

        export default reduxForm(
            {
                form: 'client',
                validate: validations
            })
            (ClientForm);

Maybe I'm not using the dropdown called nationality correctly whose component is called renderNationalities.

How can I fix this issue?, All I want is when I insert a value in dropdown I see when I'm creating client, dropdown show "please, insert a nationality" and when I'm editing client I've created on client form the dropdown shows the nationality I've inserted not the first of the reducer list.

Nationalities is the reducer.

How can I solve this issue? Any solution over here?

来源：https://stackoverflow.com/questions/60478237/get-selected-value-i-inserted-to-dropdown-when-im-editing-the-client-form