如何将material-ui选择字段与formik一起使用？

Question

我正在尝试将 formik 与具有 select attr 的material-ui Textfield 组件一起使用，每次我更改选项时都会出现此警告

\n

\n

nullMaterial-UI: 您为 select (name="subIndicatorId") 组件提供了超出范围的值。\n请考虑提供与可用选项之一或 \'\' 匹配的值。\n可用值有1、2,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,3​4​5​55​161​162​163​164​193​233​234​235​236​237​238​239​240​241​242​243​244​245​246​262​263​264​265​266​267​268​271​286​288​289​295​300​303​304​306​307​311​341

\n

\n

当页面第一次渲染时我也收到此警告

\n

\n

警告：valueprop oninput不应为空。考虑使用空字符串来清除组件或undefined不受控制的组件。

\n

\n

这是这个的代码

\n

\r\n

\r\n

import React, { useState, useEffect } from "react";\n\nimport Button from "@material-ui/core/Button";\nimport TextField from "@material-ui/core/TextField";\n\nimport { Col, Container, Row } from "react-bootstrap";\n\nimport { useFormik } from "formik";\nimport * as yup from "yup";\n\nimport { axios } from "../Axios/Axios";\n\nimport icommodityGroup from "../../assets/images/png/product.png";\nimport wheatBag from "../../assets/images/png/Wheat Bag.png";\nimport flag from "../../assets/images/png/flag.png";\nimport { MenuItem } from "@material-ui/core";\n\nconst RetailPrices = () => {\n  const [genralIndicators, setGenralIndicators] = useState([]);\n  const [governorates, setGovernorate] = useState([]);\n  const [subIndicator, setSubIndicator] = useState([]);\n  const [classification, setClassification] = useState();\n\n  const getPopulate = async () => {\n    const response = await axios\n      .get("/home/PopulateDropDowns")\n      .catch((err) => console.log("Error", err)); //handle errors\n    if (response && response.data) {\n      console.log(response);\n      setGenralIndicators(response.data.genralIndicators);\n      setGovernorate(response.data.governorates);\n      setClassification(response.data.classification);\n    }\n  };\n\n  const getSubindicator = async (id) => {\n    console.log(id);\n    const response = await axios\n      .get(`/home/SubIndicator/${id}`)\n      .catch((err) => console.log("Error", err)); //handle errors\n    if (response && response.data) {\n      setSubIndicator(response.data);\n    }\n  };\n\n  useEffect(() => {\n    getPopulate();\n  }, []);\n\n  const handleGenralIndicatorsChange = (e) => {\n    getSubindicator(e.target.value);\n  };\n\n  // Schema for yup\n  const validationSchema = yup.object({\n    commodityGroup: yup\n      .string("\xd8\xa3\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd9\x84\xd9\x85\xd8\xac\xd9\x85\xd9\x88\xd8\xb9\xd8\xa9 \xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd9\x8a\xd8\xa9")\n      .required("\xd8\xa3\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd9\x84\xd9\x85\xd8\xac\xd9\x85\xd9\x88\xd8\xb9\xd8\xa9 \xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd9\x8a\xd8\xa9 "),\n    // commodity: yup.string("\xd8\xa3\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd8\xa9").required("\xd8\xa3\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd8\xa9"),\n    // city: yup.string("\xd8\xa3\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd9\x84\xd9\x85\xd8\xaf\xd9\x8a\xd9\x86\xd8\xa9").required("\xd8\xa3\xd8\xae\xd8\xaa\xd8\xb1 \xd8\xa7\xd9\x84\xd9\x85\xd8\xaf\xd9\x8a\xd9\x86\xd8\xa9"),\n  });\n\n  const formik = useFormik({\n    initialValues: {\n      ClassificationId: 1,\n      GeneralIndicatorId: null,\n      GovernorateId: null,\n      subIndicatorId: null,\n    },\n    // validationSchema: validationSchema,\n\n    onSubmit: async (values) => {\n      alert(JSON.stringify(values, null, 2));\n      const response = await axios\n        .post("/home/PriceSearch", JSON.stringify(values, null, 2))\n        .catch((err) => console.log("Error", err)); //handle errors;\n      if (response) {\n        alert("sucess!");\n        console.log(response);\n      }\n    },\n  });\n\n  return (\n    <div>\n      <form onSubmit={formik.handleSubmit}>\n        <Row>\n          <Col className="px-0">\n            <img\n              className="p-1"\n              src={icommodityGroup}\n              alt="icon_1"\n              style={{\n                borderRadius: "6px",\n                boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",\n              }}\n            />\n\n            <TextField\n              style={{ width: "200px" }}\n              className="px-2 my-2"\n              variant="outlined"\n              name="GeneralIndicatorId"\n              id="\xd8\xa7\xd9\x84\xd9\x85\xd8\xac\xd9\x85\xd9\x88\xd8\xb9\xd8\xa9 \xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd9\x8a\xd8\xa9"\n              select\n              label="\xd8\xa7\xd9\x84\xd9\x85\xd8\xac\xd9\x85\xd9\x88\xd8\xb9\xd8\xa9 \xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd9\x8a\xd8\xa9"\n              value={formik.values.GeneralIndicatorId}\n              onChange={(e) => {\n                formik.handleChange(e);\n                handleGenralIndicatorsChange(e);\n              }}\n              error={\n                formik.touched.genralIndicators &&\n                Boolean(formik.errors.genralIndicators)\n              }\n              helperText={\n                formik.touched.genralIndicators &&\n                formik.errors.genralIndicators\n              }\n            >\n              {genralIndicators.map((option) => (\n                <MenuItem key={option.id} value={option.id}>\n                  {option.name}\n                </MenuItem>\n              ))}\n            </TextField>\n          </Col>\n          <Col className="px-0">\n            <img\n              className="p-1"\n              src={wheatBag}\n              alt="icon_1"\n              style={{\n                borderRadius: "6px",\n                boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",\n              }}\n            />\n            <TextField\n              style={{ width: "200px" }}\n              className="px-2 my-2"\n              variant="outlined"\n              name="subIndicatorId"\n              id="\xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd8\xa9"\n              select\n              label="\xd8\xa7\xd9\x84\xd8\xb3\xd9\x84\xd8\xb9\xd8\xa9"\n              value={formik.values.subIndicatorId}\n              onChange={formik.handleChange}\n              error={\n                formik.touched.subIndicator &&\n                Boolean(formik.errors.subIndicator)\n              }\n              helperText={\n                formik.touched.subIndicator && formik.errors.subIndicator\n              }\n            >\n              {subIndicator.map((option) => (\n                <MenuItem key={option.id} value={option.id}>\n                  {option.name}\n                </MenuItem>\n              ))}\n            </TextField>\n          </Col>\n          <Col className="px-0">\n            <img\n              className="p-1"\n              src={flag}\n              alt="icon_1"\n              style={{\n                borderRadius: "6px",\n                boxShadow: "10px 10px 5px 0px rgba(179, 179, 179, 0.36)",\n              }}\n            />\n            <TextField\n              style={{ width: "200px" }}\n              className="px-2 my-2"\n              variant="outlined"\n              name="GovernorateId"\n              id="\xd8\xa7\xd9\x84\xd9\x85\xd8\xad\xd8\xa7\xd9\x81\xd8\xb8\xd8\xa9"\n              select\n              label="\xd8\xa7\xd9\x84\xd9\x85\xd8\xad\xd8\xa7\xd9\x81\xd8\xb8\xd8\xa9"\n              value={formik.values.GovernorateId}\n              onChange={formik.handleChange}\n              error={\n                formik.touched.governorates &&\n                Boolean(formik.errors.governorates)\n              }\n              helperText={\n                formik.touched.governorates && formik.errors.governorates\n              }\n            >\n              {governorates.map((option) => (\n                <MenuItem key={option.id} value={option.id}>\n                  {option.name}\n                </MenuItem>\n              ))}\n            </TextField>\n          </Col>\n          <Col>\n            <Button\n              className="p-3 my-2 "\n              size="large"\n              variant="contained"\n              type="submit"\n              style={{\n                color: "#fff",\n                backgroundColor: "var(--main-green)",\n                width: "200px",\n              }}\n            >\n              \xd8\xa5\xd8\xb1\xd8\xb3\xd8\xa7\xd9\x84\n            </Button>\n          </Col>\n        </Row>\n      </form>\n    </div>\n  );\n};\n\nexport default RetailPrices;

\r\n

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

\r\n

\r\n

\r\n

\n

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

\n

Answer 1

\n

警告：输入的 value 属性不应为 null。考虑使用\n空字符串来清除组件，或者使用未定义的\n非受控组件。\n由于 oyu 正在使用受控组件，因此需要在渲染中定义所有值：

\n

\n

GeneralIndicatorId: null,\n      GovernorateId: null,\n      subIndicatorId: null,\n

\n

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

\n

\n

Material-UI：您为 select (name="subIndicatorId") 组件提供了超出范围的 null 值。\n 考虑提供一个与可用选项之一或“”匹配\n的值。

\n

\n

对于选择所有可能的值都需要是一个选项，但由于这些是null并且您没有空选项，因此它会抛出此错误。只需添加一个新的空选项：

\n

 <TextField\n              style={{ width: "200px" }}\n              className="px-2 my-2"\n              variant="outlined"\n              name="GovernorateId"\n              id="\xd8\xa7\xd9\x84\xd9\x85\xd8\xad\xd8\xa7\xd9\x81\xd8\xb8\xd8\xa9"\n              select\n              label="\xd8\xa7\xd9\x84\xd9\x85\xd8\xad\xd8\xa7\xd9\x81\xd8\xb8\xd8\xa9"\n              value={formik.values.GovernorateId}\n              onChange={formik.handleChange}\n              error={\n                formik.touched.governorates &&\n                Boolean(formik.errors.governorates)\n              }\n              helperText={\n                formik.touched.governorates && formik.errors.governorates\n              }\n            >\n               <MenuItem key={""} value={""}>\n                  No Selected // Or Empty\n                </MenuItem>\n              {governorates.map((option) => (\n                <MenuItem key={option.id} value={option.id}>\n                  {option.name}\n                </MenuItem>\n              ))}\n            </TextField>\n

\n