react 函数式组件 渲染表单

想问一下 这个react 中 form 表单select标签中如何渲染这个数据库里面的数据？以及解决 setState的异步问题

1、这里是我使用这个react 写的这个js 然后 我看这个select 这个不使用selected 而是使用这个 defaultValue 这个属性 通过 这个defaultValue属性绑定 的值 

<div className="resume-form-item">
                    <div><span>到岗:span>div>
                    <div>
                        <select ref={arriveRef} defaultValue={userInfo.arrive_duty}
                            className="form-type" name="" id=""
                            onChange={getUserInfoChange}
                            >
                            <option value="立即上岗">立即上岗option>
                            <option value="一周上岗">一周上岗option>
                            <option value="两周上岗">两周上岗option>
                            <option value="月底上岗">月底上岗option>
                        select>
                    div>
div>

2、 当我们写defaultValue=“月底上岗” 它可以绑定 成功 如图 但是 为什么绑定数据库的数据变量为什么不能展示

img

img

3、获取数据库的 数据如下 但是为什么 绑定这个数据库的数据 为什么绑定不了

img


img

img

4、当使用这个函数式组件的 进行渲染数据的时候 好像不能直接使用这个value 类似h5这种标签赋值 这个方式value直接赋值有问题 无法 点击input框

={userInfo.username} className="form-type" type="text" onChange={getUserInfoChange} />

5、当直接使用这个useRef 这个方法 的时候 这个时候 我们定义了一个fillUserInfo()方法 但是这个setstate 定义的这个方法 是一个异步的操作 无法通过这个 ref 找到这个组件标签 ref.current.value 进行赋值 然后 我就定义了一个变量 然后 用这个useEffect监听一下 但是感觉效果不怎么行

={usernameRef} className="form-type" type="text" onChange={getUserInfoChange} />

img

请问大家这个该怎么解决？

select框是通过value来绑定的，

 <select name="fruits" 
                            onChange={e=>this.optionChange(e)} 
                            value={this.state.currentfruit}>
                        <option value="apple">苹果</option>
                        <option value="banana">香蕉</option>
                        <option value="orange">橘子</option>
                        <option value="watermelon">西瓜</option>
                    </select>
  optionChange(event){
        this.setState({
            currentfruit:event.target.value
        })
    }

设置defaultValue是非受控组件，只渲染一次。

使用value改成受控组件
在onChange方法中setState，改变value