首次渲染时状态未正确更新问题求助

1. 同步状态初始值与session数据 #

姓名输入框用defaultValue设置了初始值，但React状态name和lastName的初始值为空，导致首次渲染时不满足name !== ''等校验条件。需要在初始化状态时直接从session取值：

const [name, setName] = useState(session?.namespaces?.profile?.firstName?.value || '');
const [lastName, setLastName] = useState(session?.namespaces?.profile?.lastName?.value || '');

2. 将输入框改为受控组件（推荐） #

defaultValue属于非受控组件模式，容易出现DOM值与React状态不一致的问题，建议改成受控组件，直接绑定value属性：

<input
  className={`${handles.inputOne}`}
  type="text"
  value={name}
  onChange={handleNameChange}
/>

（姓氏输入框同理修改）

3. 确保校验状态的派生逻辑正确 #

validBirthday和telephoneValid应该是基于birthday和number的派生状态，用useMemo计算可确保状态变化时及时更新：

const validBirthday = useMemo(() => {
  // 替换为你的生日校验逻辑，比如格式合法性检查
  return birthday !== '' && /* 其他校验条件 */;
}, [birthday]);

const telephoneValid = useMemo(() => {
  // 替换为你的电话校验逻辑
  return number !== '' && /* 其他校验条件 */;
}, [number]);

4. 验证依赖项覆盖完整 #

你的第二个useEffect依赖已包含validBirthday、name、lastName、telephoneValid，修改后：

• 首次渲染时name和lastName已有初始值
• API请求完成后，birthday和number更新触发validBirthday、telephoneValid变化，进而触发useEffect重新计算show状态，满足条件时自动设为true

额外优化：合并校验逻辑（可选） #

把校验逻辑抽成独立函数，让代码更简洁易维护：

const isFormValid = useMemo(() => {
  return validBirthday && 
         telephoneValid && 
         name.trim() !== '' && 
         lastName.trim() !== '';
}, [validBirthday, telephoneValid, name, lastName]);

useEffect(() => {
  setShow(isFormValid);
}, [isFormValid]);

内容的提问来源于stack exchange，提问作者Lorenzo Durante