题意：如何更新 MUI TextField 的默认值？
问题背景：
I'm finishing up the final steps of my form however I have encounter an issue when trying to display the current name of the user in the defaultValue variable of the TextField from MUI.
我在完成表单的最后步骤时遇到了一个问题，尝试在 MUI 的 TextField 的 `defaultValue` 变量中显示当前用户的名字。
If a value starts on ""/null or basically empty the defaultValue will stay empty doesn't matter how many times you update that value from ""/null to something, is there a way to fix that?
如果一个值最开始是 `""` 或 `null`，或者基本上是空的，那么 `defaultValue` 会保持为空，无论你多少次将该值从 `""` 或 `null` 更新为其他内容，有没有办法解决这个问题？
I have this: 我有以下代码
{console.log(tempName)}
<TextField
required
margin="dense"
label='Nombre'
defaultValue= {tempName}
onChange={handleChangeName} />
tempName starts empty but then I update it in a useEffect I have that brings the data of the document of the user I'm log in atm, even after having a value the defaultValue stays empty/null/"".
`tempName` 开始时为空，但随后我在一个 `useEffect` 中更新它，该 `useEffect` 用于获取当前登录用户文档的数据。即使在有值之后，`defaultValue` 仍然保持为空/`null`/`""`。
There's something else I did notice though, if you use the user.displayName directly it does works but only until you refresh (because when you refresh user goes back to null and then like .2 segs is back to his value)
不过我注意到另外一件事，如果直接使用 `user.displayName` 是有效的，但只有在刷新页面之前有效（因为刷新时用户会变回 `null`，然后大约 0.2 秒后又恢复到之前的值）。
this is how it looks when I use user before refresh
这是我在刷新之前使用用户时的效果。
since user brings both name and lastname (displayName, basically) I wanted to split it and all the user information is in a document :
因为用户包含了姓名和姓氏（displayName，基本上），我想将其拆分，而所有用户信息都在一个文档中：
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])
This is how it looks in the firebase
这在 Firebase 中的样子是这样的：
Is that how is suppose to work?
这应该是怎么回事吗？
I would have think that defaultValue will update to the value you are giving it... Thank you, I didn't find anything related with this on TextField documentation. All I know is that they add initialized values from the very beginning and not values that get "updated" with time, I just wanted to display the current information of the user in the form.
我原本以为 `defaultValue` 会更新为你提供的值……谢谢你，我在 `TextField` 文档中没有找到任何相关信息。我只知道它们从一开始就添加初始化值，而不是随着时间“更新”的值，我只是想在表单中显示用户的当前信息。
问题解决：
Have a look at controlled mode example, defaultValue doesn't work on subsequent renders, if you want to control and update the value, use value prop.
看看受控模式的示例，`defaultValue` 在后续渲染中不工作。如果你想控制并更新值，请使用 `value` 属性。
Default value is usually used in uncontrolled mode where the value is controlled by the DOM element, not react itself, and the only way to alter it is setup an initial value when it is first mounted. The value of the uncontrolled component can only be accessed (without using ref) when submitting the form or validating the value, if you want to update the state on the fly based on the value as the user types, use controlled mode.
默认值通常用于非受控模式，在这种模式下，值由 DOM 元素控制，而不是 React 本身，唯一可以更改的方法是在首次挂载时设置初始值。非受控组件的值只能在提交表单或验证值时访问（不使用 ref），如果你想根据用户输入的值动态更新状态，请使用受控模式。
value={value}
onChange={e => setState(e.target.value)}
what's the purpose of defaultValue then? if you can just use placeholders for stuff like "Name" and then use value instead of defaultValue
If you use a placeholder, the default value of that TextField won't be submitted in the form (probably not what you expect here).
如果使用占位符，那么该 `TextField` 的默认值在表单提交时不会被包含（这可能不是你所期望的）。
