Select Material UI Tag 使用 Yup 和 formik 不显示错误

Question

当没有选择任何内容时，它应该打印错误，但是，通过检查元素我可以看到错误 label 但没有出现。 另一个问题是label“国家”没有出现。 这只发生在 MUI 中的 select 标记和 TextField 下面的“Zip”标记中是可以的。

    <Select
              labelId="demo-simple-select-label"
              required
              fullWidth
              label="Country" 
              name="country"
              id="demo-simple-select"
              value={formik.values.country}
              onChange={formik.handleChange}
              error={
                formik.touched.country && Boolean(formik.errors.country)
              }
              helperText={formik.touched.country && formik.errors.country}
            >
              <MenuItem value={"DE"}>Germany</MenuItem>
              <MenuItem value={"FR"}>France</MenuItem>
            </Select>

Answer 1

我设法找到了答案：试试这个：

import { FormHelperText } from "@mui/material";

  <FormControl>
      <Select
        labelId="demo-simple-select-label"
        required
        fullWidth
        label="Country" 
        name="country"
        id="demo-simple-select"
        value={formik.values.country}
        onChange={formik.handleChange}
        error={
           Boolean(formik.touched.country && formik.errors.country)
        }
      >
         <MenuItem value={"DE"}>Germany</MenuItem>
         <MenuItem value={"FR"}>France</MenuItem>
      </Select>
      {formik.touched.country && formik.errors.country ? (
         <FormHelperText
            sx={{ color: "#bf3333", marginLeft: "16px !important" }}
         >
            {formik.touched.country && formik.errors.country}
         </FormHelperText>
         ) : null}
  </FormControl>

希望它有所帮助