在 React 中處理 Select 選項第一次給我空字符串

Question

我對 reactjs 很陌生。 我需要在我的表單中處理 select 選項。 並設置 ne useStae 對應 select 選項並存儲更改事件的選項值。 但問題是，當我第一次使用 select 任何選項時，它會給我一個空字符串。

這是代碼

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

 const genderHandle = (e) =>{
        setGender(e.target.value)
        console.log(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="Anther Gender">Another Gender</option>
   </select> 


output ""

難道我做錯了什么？

Answer 1

引用反應文檔：

調用set function 不會改變運行代碼中的 state
...狀態的行為就像一個快照。 更新 state 請求使用新的 state 值進行另一個渲染，但不會影響您已經運行的事件處理程序中的計數 JavaScript 變量。

Answer 2

state 將正確設置，唯一的問題是日志記錄部分。 useState()是異步的，因此console.log()將在它設置新的 state 之前被觸發。 這就是為什么您總是會看到以前的 state。

您可以通過以下方式查看實際當前的 state：

useEffect(()=>{
   console.log(gender)
}, [gender])

Answer 3

我假設您正在引用console.log的 output 。

它顯示以前的 state 的原因是因為 setState 方法是異步的，這意味着您的 state 在調用console.log時尚未更新。

有很多不同的方法可以解決這個問題，但是最簡單的可能是將console.log genderHandle之外

const [gender,setGender] = useState("");
console.log(gender);