React中useState初始加载服务器数据不显示，路由切换后显示问题

• useState的初始值只会在组件首次渲染时赋值一次。页面刷新时，useLoggedInUser是异步请求用户数据，首次渲染阶段user还未获取到（值为undefined），所以fullName的初始值被设为空字符串。
• 当后续user数据加载完成，组件会重新渲染，但useState不会自动同步更新fullName的状态，因此表单依然显示为空。
• 切换页面再返回时，组件重新挂载，此时user数据已经被缓存，useState能拿到正确的初始值，表单才会被填充。

最直接的解决方式是用useEffect监听user的变化，当user数据更新时同步更新表单的状态：

import { useState, useEffect } from 'react'

const { user, isLoading: loader } = useLoggedInUser()
const [fullName, setFullName] = useState<string>('')

// 监听user变化，同步更新表单状态
useEffect(() => {
  setFullName(user?.fullName || '')
}, [user]) // 依赖项设为user，当user改变时自动触发

<TextField
     fullWidth
     id="fullName"
     label="Full Name"
     size="small"
     value={fullName}
     onChange={(e: ChangeEvent<HTMLInputElement>) => setFullName(e.target.value)}
     disabled={loader} // 加载时禁用表单，避免用户无效操作
/>

补充优化 #

• 加载状态下可以给表单添加占位文本或者加载动画，提升用户体验；
• 如果user的fullName可能为null或空字符串，直接用user?.fullName || ''可以确保状态始终有有效值。

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