React中处理Select选项首次选中返回空字符串问题排查

你遇到的问题核心是React的useState更新是异步的：调用setGender(e.target.value)后，gender变量不会立刻更新为新值，所以你在genderHandle里直接console.log(gender)，打印的还是更新前的初始空字符串。

解决方法有两种： #

1. 直接打印当前选中的最新值

既然e.target.value就是你要设置的新值，直接打印它就能看到实时选中的内容：

const [gender, setGender] = useState("")

const genderHandle = (e) => {
    const selectedValue = e.target.value;
    setGender(selectedValue);
    console.log(selectedValue); // 直接打印当前选中值
}

<select onChange={genderHandle}> 
    <option selected disabled>What is your gender?</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Unknown">Unknown</option>
    <option value="Another Gender">Another Gender</option>
</select>

2. 用useEffect监听state变化

如果需要在gender更新完成后做操作，可以用useEffect监听gender的变化，这样每次gender更新后都会触发回调：

import { useState, useEffect } from 'react';

const [gender, setGender] = useState("")

const genderHandle = (e) => {
    setGender(e.target.value);
}

// 监听gender变化，更新后打印最新值
useEffect(() => {
    console.log(gender);
}, [gender]); // 依赖项为gender，只有gender变化时才执行

<select onChange={genderHandle}> 
    <option selected disabled>What is your gender?</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Unknown">Unknown</option>
    <option value="Another Gender">Another Gender</option>
</select>

另外注意你代码里的Anther Gender拼写错误，已经在示例里修正为Another Gender。

内容的提问来源于stack exchange，提问作者Abhishek Poddar