如何將 material-ui select 字段與 formik 一起使用？

Question

我正在嘗試將 formik 與 material-ui 文本字段組件與 select attr 一起使用，每次我更改選項時它都會給我這個警告

Material-UI：您為 select (name="subIndicatorId") 組件提供了超出范圍的值null 。 考慮提供與可用選項之一或“”匹配的值。 可用值為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

當頁面第一次呈現時，我也會收到此警告

警告： input value屬性不應為 null。 考慮使用空字符串來清除組件或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

警告：輸入值屬性不應為 null。 考慮使用空字符串來清除組件或 undefined 用於不受控制的組件。 由於 oyu 正在使用受控組件，因此所有值都需要在 render 中進行定義：

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

但是那些是未定義/空的，所以將它們設置為""可以解決這個問題。

Material-UI：您為 select (name="subIndicatorId") 組件提供了超出范圍的值 null。 考慮提供與可用選項之一或“”匹配的值。

對於選擇所有可能的值需要一個選項，但由於這些是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>