React 表单警告：收到非布尔属性“验证”的“真”答案

【问题标题】：Warning with React form: Received `true` for a non-boolean attribute `validate`React 表单警告：收到非布尔属性“验证”的“真”
【发布时间】：2021-08-06 12:26:43
【问题描述】：

我想尝试摆脱这个警告

index.js:1 警告：收到true 的非布尔属性validate。如果要将其写入 DOM，请改为传递字符串：validate="true" 或 validate={value.toString()}。

我正在为订阅用户制作一个验证表单。当未填写电子邮件字段并且用户尝试按下订阅按钮时，我会显示工具提示。

这是我的表单（使用 Material UI 样式）：

<Form
              onSubmit={onSubmit}
              initialValues={{ userEmail: 'johndoe@example.com', arn: 'AA-01-23-45-678901-2' }}
              validate={validate}
              render={({ handleSubmit, form, submitting, pristine, values }) => (
              <form onSubmit={handleSubmit} validate>

                <DialogContentText>
                  To subscribe to this website, please enter your email address here. We will send updates
                  occasionally.
                </DialogContentText>

                <TextField
                  label="Email Address"
                  name="userEmail"
                  margin="none"
                  required={true}
                  fullWidth
                />

                {formSubmitted && <Grid item xs={12}>
                  <Typography name='submitMessage' variant='subtitle1'>You have subscribed to {values.arn}. {/* Connect to backend here */}</Typography>
                </Grid>}

                <DialogActions>
                  <Button /* onClick={handleClose} */ color="primary" type="submit" disabled={submitting}>
                    Subscribe
                  </Button>
                  <Button onClick={handleClose} color="primary">
                    Close
                  </Button>
                </DialogActions>

              </form>
              )}
            />

我的验证函数在组件函数之外但在同一个js文件中：

const validate = values => {
  const errors = {};
  if (!values.userEmail) {
    errors.userEmail = 'Required';
  }
  return errors;
};

【问题讨论】：

标签： javascript reactjs forms validation material-ui

【解决方案1】：

对于未来的读者，问题最终出在我在表单标签中使用的验证功能上！

【讨论】：