如何在 formik 中使用 material-ui select 字段？
how to use material-ui select field with formik?
我正在尝试将 formik 与 material-ui Textfield componet 与 select attr 一起使用，每次我更改选项时它都会给我这个警告
Material-UI: You have provided an out-of-range value null for the select (name="subIndicatorId") component.
Consider providing a value that matches one of the available options or ''.
The available values are 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
此外，我在第一次呈现页面时收到此警告
Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.
这是代码
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>
它工作正常并且 return 响应，但我想处理这两个警告
Warning: value prop on input should not be null. Consider using an
empty string to clear the component or undefined for uncontrolled
components.
Since oyu are suing controlled components, all values need to be defiend in render:
GeneralIndicatorId: null,
GovernorateId: null,
subIndicatorId: null,
但是那些是 undefined/null，所以将它们设置为 "" 可以解决这个问题。
Material-UI: You have provided an out-of-range value null for the
select (name="subIndicatorId") component. Consider providing a value
that matches one of the available options or ''.
For selects all values that possible needs to be an option,但由于这些是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>
我正在尝试将 formik 与 material-ui Textfield componet 与 select attr 一起使用，每次我更改选项时它都会给我这个警告
Material-UI: You have provided an out-of-range value
nullfor the select (name="subIndicatorId") component. Consider providing a value that matches one of the available options or ''. The available values are1,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
此外，我在第一次呈现页面时收到此警告
Warning:
valueprop oninputshould not be null. Consider using an empty string to clear the component orundefinedfor uncontrolled components.
这是代码
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>
它工作正常并且 return 响应，但我想处理这两个警告
Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components. Since oyu are suing controlled components, all values need to be defiend in render:
GeneralIndicatorId: null,
GovernorateId: null,
subIndicatorId: null,
但是那些是 undefined/null，所以将它们设置为 "" 可以解决这个问题。
Material-UI: You have provided an out-of-range value null for the select (name="subIndicatorId") component. Consider providing a value that matches one of the available options or ''.
For selects all values that possible needs to be an option,但由于这些是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>