如何更新MUI TextField的defaultValue，解决异步加载数据后默认值不生效问题

问题原因 #

这是React非受控组件的正常工作逻辑，defaultValue 仅会在组件首次挂载时生效，后续无论该属性传入的值如何更新，都不会触发组件内部值的变更，MUI的TextField是对原生input的封装，完全遵循这一规则。

你之前碰到的user.displayName偶发生效的问题也源于此：页面未刷新时user已经完成加载，组件首次挂载就能拿到正确值；刷新后首次渲染user为null，defaultValue被初始化为空，后续user加载完成后属性不再生效，所以显示为空。

解决方案 #

方案1：使用受控组件（最推荐）

把defaultValue替换为value属性，让输入框的值完全由你的state控制，你已经定义了tempName对应的更新逻辑，只需修改组件属性即可：

<TextField 
  required 
  margin="dense" 
  label='Nombre' 
  value={tempName} 
  onChange={handleChangeName} 
/>

这种方式能保证输入框的值和你的state始终同步，不存在异步更新不生效的问题。

方案2：非受控组件适配方案

如果你确实需要使用非受控模式，可以选择以下两种方式之一：

• 加key属性强制重绘：给TextField添加和值绑定的key，当值更新时React会销毁旧组件、挂载新组件，新组件的defaultValue会读取最新值：

<TextField 
  required 
  margin="dense" 
  label='Nombre' 
  key={tempName}
  defaultValue={tempName} 
  onChange={handleChangeName} 
/>

• 等待数据加载完成再渲染组件：新增一个加载状态，异步请求用户数据完成前不渲染TextField，保证组件首次挂载时defaultValue就能拿到正确的值：

// 新增加载状态
const [loading, setLoading] = useState(true);

// useEffect请求完成后更新加载状态
useEffect(() => {
  if(!user) return;
  const userDoc = db.collection('usuarios').doc(user.uid);
  userDoc.get().then(doc => {
    if (doc.exists) {
      const data = doc.data();
      setTempName(data.name)
      // 其余state更新逻辑保持不变
    }
    setLoading(false);
  });
}, [user])

// 渲染时做加载判断
{!loading && <TextField 
  required 
  margin="dense" 
  label='Nombre' 
  defaultValue={tempName} 
  onChange={handleChangeName} 
/>}

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