如何更新 MUI TextField 的默认值？

Question

我正在完成表单的最后步骤，但是在尝试在 MUI 的TextField的defaultValue变量中显示用户的当前名称时遇到了问题。

如果一个值从"" / null或基本上为空，则defaultValue将保持为空，无论您将该值从 ""/null 更新为多少次，有没有办法解决这个问题？

我有这个：

{console.log(tempName)}

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

tempName开始为空，但随后我在一个useEffect更新它，它带来了我登录 atm 的用户文档的数据，即使在defaultValue值保持为空/空/“”的值之后也是如此。

不过，我确实注意到了其他一些事情，如果您直接使用user.displayName它确实有效，但只有在您刷新之前（因为当您刷新时，用户会返回 null 然后像 .2 segs 返回到他的值）

这是我在刷新前使用用户时的外观

由于用户同时带来了姓名和姓氏（基本上是显示名称），因此我想将其拆分，并且所有用户信息都在一个文档中：

    const [tempName, setTempName] = useState("");
    const [tempLastName, setTempLastName] = useState("");
    const [tempEmail, setTempEmail] = useState("");
    const [tempPhone, setTempPhone] = useState("");
    const [tempIdType, setTempIdType] = useState("");
    const [tempIdTypes, setTempIdTypes] = useState("");

    useEffect(() => {
        const userDoc = db.collection('usuarios').doc(user.uid);
        userDoc.get().then(doc => {
            if (doc.exists) {
                const tempData = [];
                const data = doc.data();
                tempData.push(data);
                setTempName(tempData[0].name)
                setTempLastName(tempData[0].lastName)
                setTempEmail(tempData[0].email)
                setTempPhone(tempData[0].phone)
                setTempIdType(tempData[0].id)
                setTempIdTypes(tempData[0].idType)
                setOldPassword(tempData[0].password)
            }
          });
    }, [user])

这是它在firebase中的样子

这是假设的工作方式吗？

我会认为defaultValue会更新为您提供的值...谢谢，我在TextField 文档中没有找到与此相关的任何内容。 我所知道的是，他们从一开始就添加了初始化值，而不是随时间“更新”的值，我只想在表单中显示用户的当前信息。

Answer 1

看一下受控模式示例， defaultValue不适用于后续渲染，如果要控制和更新值，请使用value属性。

默认值通常用于不受控制的模式，其中该值由 DOM 元素控制，而不是自己反应，并且更改它的唯一方法是在首次安装时设置初始值。 非受控组件的值只能在提交表单或验证值时访问（不使用 ref），如果您想根据用户键入的值动态更新状态，请使用受控模式。

value={value}
onChange={e => setState(e.target.value)}

那么 defaultValue 的目的是什么？ 如果您可以将占位符用于诸如“名称”之类的内容，然后使用值而不是 defaultValue

如果您使用占位符，则不会在表单中提交该TextField的默认值（可能不是您在这里期望的）。