Javascript 如何在formik中使用物料ui选择字段？

我正在尝试使用formik with material ui Textfield componet with select attr，每次我更改选项时，它都会给我这个警告

物料界面：您为select（name=“subIndicatorId”）组件提供了超出范围的值

null

。 考虑提供一个匹配可用选项或'''的值。 可用值为

1

，

2

，

3

，

4

，

5

，

55

，

161

，

162

，

163

，

164

，

193

，

233

，

234

，

，
236
，
，
，
240
，
241
，
242
，
243
，
244
，
245
，
246
，
262
，
263
，
264
，
265
，
266
，
267
，
268
，
271
，
，
286
，
，
，
300
，
303
，
304
，
306
，
307
，
311
，
341

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

警告：
value
prop on
input
不应为空。考虑使用空字符串来清除未受控制的组件的组件或代码>未定义的< /代码>。
这是代码


import React，{useState，useffect}来自“React”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“react bootstrap”导入{Col，Container，Row}；
从“formik”导入{useFormik}；
从“yup”导入*作为yup；
从“./axios/axios”导入{axios}；
从“../../assets/images/png/product.png”导入icommodityGroup；
从“../../assets/images/png/wheatBag.png”导入小麦袋；
从“../../assets/images/png/flag.png”导入标志；
从“@material ui/core”导入{MenuItem}”；
常数零售价格=（）=>{
const[genralIndicators，setGenralIndicators]=useState（[]）；
const[省，setGovernorate]=useState（[]）；
常量[subIndicator，setSubIndicator]=使用状态（[]）；
const[classification，setClassification]=useState（）；
const getPopulate=async（）=>{
常数响应=等待axios
.get（“/home/PopulateDropDowns”）
.catch（（err）=>console.log（“Error”，err））；//处理错误
if（response&&response.data）{
控制台日志（响应）；
setGenralIndicators（response.data.genralIndicators）；
SetGovernment（响应.数据.省）；
setClassification（响应、数据、分类）；
}
};
const getSubindicator=async（id）=>{
console.log（id）；
常数响应=等待axios
.get（`/home/SubIndicator/${id}`）
.catch（（err）=>console.log（“Error”，err））；//处理错误
if（response&&response.data）{
设置辅助指示器（响应数据）；
}
};
useffect（（）=>{
getPopulate（）；
}, []);
常量handleGenralIndicatorsChange=（e）=>{
getSubindicator（即目标值）；
};
//是的
const validationSchema=yup.object({
商品组：是的
.string（“字符串”）
.所需的（如“必要”），
//商品：是的，字符串（“15718”）是必需的（“15718”），
//城市：是的。字符串（“15718”）需要（“15718”），
});
常数formik=useFormik({
初始值：{
分类ID:1，
GeneralIndicatorId:null，
省ID:null，
子指示符：空，
},
//validationSchema:validationSchema，
onSubmit:async（值）=>{
警报（JSON.stringify（值，null，2））；
常数响应=等待axios
.post（“/home/PriceSearch”，JSON.stringify（值，null，2））
.catch（（err）=>console.log（“Error”，err））；//处理错误；
如果（答复）{
警惕（“成功！”）；
控制台日志（响应）；
}
},
});
返回(
{
formik.handleChange（e）；
手动校准指示器更改（e）；
}}
错误={
formik.toucted.genralIndicators&&
布尔（formik.errors.genralindicator）
}
帮助文字={
formik.toucted.genralIndicators&&
formik.errors.genralindicator
}
>
{genralIndicators.map（（选项）=>(
{option.name}
))}
{subIndicator.map（（选项）=>(
{option.name}
))}
{省地图（（选项）=>(
{option.name}
))}
إرسال
);
};
出口违约零售价格


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

但是这些是未定义的/null，因此将它们设置为
“
将解决此问题

物料界面：您为物料提供了超出范围的空值
选择（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>


 <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>