如何使用 useEffect 掛鈎中設置的另一個 state 的值設置 useState 的初始值？

Question

這個問題聽起來很復雜，但我想做的是

1. 我在 useEffect 掛鈎中從 firestore 獲取用戶數據，然后將數據放入 state 中。 這部分工作正常。

const [profile, setProfile] = useState("")

useEffect(() => {
// Get user profile data from firestore.. 
    setProfile(userData) 
}, [])

2. 我有 html 無線電輸入，用戶可以在其中更改性別，但我需要使用 state 設置初始性別（他們在注冊期間選擇的性別）

const defaultGender = profile.gender
const [gender, setGender] = useState(defaultGender)

<input onChange={e => setGender(e.target.value)} type="radio" id="Man" name="gender" value="Man" checked={defaultGender === "Man"} /> <label htmlFor="Man">Man</label>

<input onChange={e => setGender(e.target.value)} type="radio" id="Woman" name="gender" value="Woman" checked={defaultGender === "Woman"} /> 
<label htmlFor="Woman">Woman</label>

問題是，使用此代碼， console.log(gender)返回undefined ，我無法檢查（選擇）不同的性別，因為它卡在 Man 上。

請指教

Answer 1

似乎您只需要使用 state 中的gender （不是defaultGender ）作為checked輸入的道具：

const [gender, setGender] = useState(profile.gender)

<input onChange={e=> setGender(e.target.value)} type="radio" id="Man" name="gender" value="Man" checked={gender === "Man"} />
<label htmlFor="Man">Man</label>
<input onChange={e=> setGender(e.target.value)} type="radio" id="Woman" name="gender" value="Woman" checked={gender === "Woman"} />
<label htmlFor="Woman">Woman</label>