我试图使用formik与material-ui Textfield组件与select attr，每次我改变选项它给我这个警告
Material-UI:您为select (name="subIndicatorId")组件提供了一个超出范围的值
null。考虑提供一个与可用选项或"匹配的值。可用值1,2、34,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上的valueprop不应该为空。考虑使用空字符串来清除组件或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>可以正常工作并返回响应，但是我想处理这两个警告
警告:输入的值prop不应该为空。考虑使用空字符串用于清除组件或未定义的未控制组件组件。由于您使用的是受控组件，因此需要在render:
中定义所有值。
GeneralIndicatorId: null,
GovernorateId: null,
subIndicatorId: null,
但是这些是未定义的/null，所以将它们设置为""将解决这个问题。
Material-UI:您提供了一个超出范围的值nullselect (name="subIndicatorId") component。考虑提供一个值匹配一个可用选项或"。
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>