Question

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

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 有两种作用：

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

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

例如：

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

反应 TextField 材质 UI 值

1 个答案: