如何用useEffect钩子中设置的state值作为useState的初始值？

问题根源 #

• useState仅会在组件首次渲染时执行初始化赋值。你的profile初始值为空字符串，首次渲染时取profile.gender就是undefined，因此gender state的初始值就是undefined。后续useEffect异步拉取到Firestore数据更新profile后，不会重新触发gender的初始化逻辑，所以gender一直是初始的undefined。
• 单选按钮的checked属性绑定的是固定的defaultGender变量，而非响应式的gender state，因此调用setGender修改状态后，单选框的选中状态不会同步更新，就会出现无法切换、固定选中某个选项的问题。

修复方案 #

1. 新增useEffect监听profile的变化，拉取到用户数据后同步更新gender的取值
2. 将单选按钮的checked属性绑定为gender state，保证状态变化时视图同步更新

修正后代码 #

状态定义与数据拉取部分

// profile初始值建议设为null或空对象，避免取属性时出现语法异常
const [profile, setProfile] = useState(null)
const [gender, setGender] = useState(null)

useEffect(() => {
  // 此处为原有的Firestore拉取用户数据逻辑
  // Get user profile data from firestore.. 
  setProfile(userData) 
}, [])

// 监听profile数据，拉取完成后同步gender初始值
useEffect(() => {
  if (profile?.gender) {
    setGender(profile.gender)
  }
}, [profile])

单选按钮部分

<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>

内容的提问来源于stack exchange，提问作者Deon Okonkwo