如何在formik中使用material-ui选择字段？

Question

我正在尝试使用带有 select attr 的 material-ui Textfield 组件的 formik，每次我更改选项时它都会给我这个警告

Material-UI：您为 select (name="subIndicatorId") 组件提供了超出范围的值 null。 考虑提供与可用选项之一或“”匹配的值。 可用值为1、2、3、4、5、55、161、162、163、193、@97654332@988 @,234,235,236,237,238,239,240,241,242,244,244,244,@987654344 246，262，263，264，265，266，267，268，271，286，288，289，295、300、303、304、306、307、311、341

当页面第一次呈现时，我也会收到此警告

警告：input 上的 value 属性不应为空。考虑使用空字符串清除组件或使用undefined 清除不受控制的组件。

这里是代码

import React, { useState, useEffect } from "react";

import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";

import { Col, Container, Row } from "react-bootstrap";

import { useFormik } from "formik";
import * as yup from "yup";

import { axios } from "../Axios/Axios";

import icommodityGroup from "../../assets/images/png/product.png";
import wheatBag from "../../assets/images/png/Wheat Bag.png";
import flag from "../../assets/images/png/flag.png";
import { MenuItem } from "@material-ui/core";

const RetailPrices = () => {
  const [genralIndicators, setGenralIndicators] = useState([]);
  const [governorates, setGovernorate] = useState([]);
  const [subIndicator, setSubIndicator] = useState([]);
  const [classification, setClassification] = useState();

  const getPopulate = async () => {
    const response = await axios
      .get("/home/PopulateDropDowns")
      .catch((err) => console.log("Error", err)); //handle errors
    if (response && response.data) {
      console.log(response);
      setGenralIndicators(response.data.genralIndicators);
      setGovernorate(response.data.governorates);
      setClassification(response.data.classification);
    }
  };

  const getSubindicator = async (id) => {
    console.log(id);
    const response = await axios
      .get(`/home/SubIndicator/${id}`)
      .catch((err) => console.log("Error", err)); //handle errors
    if (response && response.data) {
      setSubIndicator(response.data);
    }
  };

  useEffect(() => {
    getPopulate();
  }, []);

  const handleGenralIndicatorsChange = (e) => {
    getSubindicator(e.target.value);
  };

  // Schema for yup
  const validationSchema = yup.object({
    commodityGroup: yup
      .string("أختر المجموعة السلعية")
      .required("أختر المجموعة السلعية "),
    // commodity: yup.string("أختر السلعة").required("أختر السلعة"),
    // city: yup.string("أختر المدينة").required("أختر المدينة"),
  });

  const formik = useFormik({
    initialValues: {
      ClassificationId: 1,
      GeneralIndicatorId: null,
      GovernorateId: null,
      subIndicatorId: null,
    },
    // validationSchema: validationSchema,

    onSubmit: async (values) => {
      alert(JSON.stringify(values, null, 2));
      const response = await axios
        .post("/home/PriceSearch", JSON.stringify(values, null, 2))
        .catch((err) => console.log("Error", err)); //handle errors;
      if (response) {
        alert("sucess!");
        console.log(response);
      }
    },
  });

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <Row>
          <Col className="px-0">
            <img
              className="p-1"
              src={icommodityGroup}
              alt="icon_1"
              style={{
                borderRadius: "6px",
                boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
              }}
            />

            <TextField
              style={{ width: "200px" }}
              className="px-2 my-2"
              variant="outlined"
              name="GeneralIndicatorId"
              id="المجموعة السلعية"
              select
              label="المجموعة السلعية"
              value={formik.values.GeneralIndicatorId}
              onChange={(e) => {
                formik.handleChange(e);
                handleGenralIndicatorsChange(e);
              }}
              error={
                formik.touched.genralIndicators &&
                Boolean(formik.errors.genralIndicators)
              }
              helperText={
                formik.touched.genralIndicators &&
                formik.errors.genralIndicators
              }
            >
              {genralIndicators.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </TextField>
          </Col>
          <Col className="px-0">
            <img
              className="p-1"
              src={wheatBag}
              alt="icon_1"
              style={{
                borderRadius: "6px",
                boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
              }}
            />
            <TextField
              style={{ width: "200px" }}
              className="px-2 my-2"
              variant="outlined"
              name="subIndicatorId"
              id="السلعة"
              select
              label="السلعة"
              value={formik.values.subIndicatorId}
              onChange={formik.handleChange}
              error={
                formik.touched.subIndicator &&
                Boolean(formik.errors.subIndicator)
              }
              helperText={
                formik.touched.subIndicator && formik.errors.subIndicator
              }
            >
              {subIndicator.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </TextField>
          </Col>
          <Col className="px-0">
            <img
              className="p-1"
              src={flag}
              alt="icon_1"
              style={{
                borderRadius: "6px",
                boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",
              }}
            />
            <TextField
              style={{ width: "200px" }}
              className="px-2 my-2"
              variant="outlined"
              name="GovernorateId"
              id="المحافظة"
              select
              label="المحافظة"
              value={formik.values.GovernorateId}
              onChange={formik.handleChange}
              error={
                formik.touched.governorates &&
                Boolean(formik.errors.governorates)
              }
              helperText={
                formik.touched.governorates && formik.errors.governorates
              }
            >
              {governorates.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </TextField>
          </Col>
          <Col>
            <Button
              className="p-3 my-2 "
              size="large"
              variant="contained"
              type="submit"
              style={{
                color: "#fff",
                backgroundColor: "var(--main-green)",
                width: "200px",
              }}
            >
              إرسال
            </Button>
          </Col>
        </Row>
      </form>
    </div>
  );
};

export default RetailPrices;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

它工作正常并返回响应，但我想处理这两个警告

Answer 1

警告：输入的 value 属性不应为空。考虑使用一个 空字符串清除组件或 undefined 表示不受控制 组件。 由于 oyu 使用受控组件，所有值都需要在 render 中进行定义：

GeneralIndicatorId: null,
      GovernorateId: null,
      subIndicatorId: null,

但是那些是未定义/空的，所以将它们设置为 "" 可以解决这个问题。

Material-UI：您为 选择 (name="subIndicatorId") 组件。考虑提供一个值 匹配可用选项之一或 ''。

For 选择所有可能的值需要作为选项，但由于这些是null 并且您没有 null 选项，因此会引发此错误。只需添加一个新的空选项：

 <TextField
              style={{ width: "200px" }}
              className="px-2 my-2"
              variant="outlined"
              name="GovernorateId"
              id="المحافظة"
              select
              label="المحافظة"
              value={formik.values.GovernorateId}
              onChange={formik.handleChange}
              error={
                formik.touched.governorates &&
                Boolean(formik.errors.governorates)
              }
              helperText={
                formik.touched.governorates && formik.errors.governorates
              }
            >
               <MenuItem key={""} value={""}>
                  No Selected // Or Empty
                </MenuItem>
              {governorates.map((option) => (
                <MenuItem key={option.id} value={option.id}>
                  {option.name}
                </MenuItem>
              ))}
            </TextField>