如何使用 useEffect 挂钩中设置的另一个 state 的值设置 useState 的初始值？

Question

This question sounds complicated but what I am trying to do is

1. I get user data from firestore in a useEffect hook and then put the data in a state. This part works fine.

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

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

2. I have html radio inputs where user can change their gender but I need to set the initial gender (one they choose during sign-up) with a 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>

The problem is, with this code, console.log(gender) returns undefined and I can not check (select) a different gender as it is stuck on Man.

Please advice

Answer 1

Seems like you just need to use gender from the state (not defaultGender ) for the checked input's prop:

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>