react TextField material UI value

Question

我在模态中使用装备UI表单组件。此模态可以打开以添加或编辑项，因此值可以为空也可以不为空。我把默认的props值放在一个状态中，但它总是空的，永远不会得到以前的值。。。这是我的代码：

const Comp = (props) => {
const { edit, values } = props // edit props for editing user
// values is :
{
prenom: 'name',
nom: 'name'
}
// ...
const [nom, setNom] = React.useState(edit ? values.nom : '')
const [prenom, setPrenom] = React.useState(edit ? values.prenom : '')
// ...
return (
<form>
<TextField
id="prenom"
value={prenom}
label="Prénom"
variant="outlined"
onChange={(event) => setPrenom(event.target.value)}
/>
<TextField
id="nom"
value={nom}
label="Nom"
variant="outlined"
onChange={(event) => setNom(event.target.value)}
/>
</form>
)
}

感谢您的帮助

Answer 1

我猜您已经在父级上使用了Comp，但在某些状态更改之前不可见，比如isDialogOpen。然后，一旦用户想要编辑一些对象，你就可以做一些类似的事情

setIsDialogOpen(true);
setDialogEditMode(true);
setValuesToEdit({nom: 'Foo', prenom: 'Bar'});

您必须明白，一旦使用组件(<Comp prop='value' />(React渲染它，即使没有任何东西到达实际的Dom，也会调用Comp函数！因此，一开始它是用一些空值调用的，然后您想让用户进行编辑，您可以更改父状态。但是Comp状态仍然是使用(空值(创建的状态。

记住这一点：useState有两种作用：

• 在第一次渲染时，它返回给定参数的值
• 任何future渲染它都会忽略参数并返回保存的状态

因此，为了更改保存的状态，您必须在道具更改时声明反应/效果，您可以在Comp中使用useEffect

例如：

useEffect(() => {
setNom(values.nom);
setPrenom(values.prenom);
}, [values])