使用Grommet创建受控窗体会引发错误

Question

我正在尝试按照https://v2.grommet.io/form中的示例使用Grommet创建一个基本表单。我的特定表单如下所示：

import React from 'react';
import { Box, Form, FormField, TextInput, Button } from 'grommet';

const defaultValue = {};

const LoginForm = () => {
  const [value, setValue] = React.useState(defaultValue);

  function handleSubmit(e) {
    e.preventDefault();
    const { email, password } = e.value;
    console.log('pretending to log in:', email, password);
    // doLogin(email, password)
  }

  return (
    <Form
      value={value}
      onChange={nextValue => {
        setValue(nextValue);
      }}
      onReset={() => setValue(defaultValue)}
      onSubmit={handleSubmit}
    >
      <FormField label="email" name="email" required>
        <TextInput name="email" />
      </FormField>
      <FormField label="password" name="password" required>
        <TextInput name="password" />
      </FormField>
      <Box direction="row" justify="between" margin={{ top: 'medium' }}>
        <Button type="reset" label="Reset" />
        <Button type="submit" label="Login" primary />
      </Box>
    </Form>
  );
};

只要我开始在这两个字段中键入内容，就会得到以下结果：

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: ...

请注意，如果我将表单代码替换为上面链接中示例中的剪切/粘贴，我会得到完全相同的错误。

我对这个错误的含义有一个相当合理的理解，但我不知道在这种情况下如何修复它。是Grommet的受控表单组件的实现被破坏了，还是我的配置或包中缺少了一些可能导致这种情况的东西？

Answer 1

React.js控制的标准不允许未定义对象。所以问题开始于你是如何定义你的defaultValue = {};的，因为它是一个空的对象，没有初始值给FormField的孩子，这导致他们是未定义的，从而导致错误。因此，如果您要更改预设值，使其更适合您的字段，例如defaultValue = { password: '' };，它将修复您的错误。

有关React受控和非受控输入的更多信息，请阅读此A component is changing an uncontrolled input of type text to be controlled error in ReactJS