Javascript 材料UI选择警告错误,声称“可用值”为空

Javascript 材料UI选择警告错误,声称“可用值”为空,javascript,reactjs,material-ui,formik,formik-material-ui,Javascript,Reactjs,Material Ui,Formik,Formik Material Ui,这个问题来自一个使用MERN stack Mongo Express React节点并大量使用Material UI和Formik的应用程序。所讨论的功能是Formik表单中的Select,其中MenuItems是从所选设备的对象数组中动态创建的。以下是代码的简化版本: <MySelect label="Facility" name="facility" className={classes.select}> <MenuItem va

这个问题来自一个使用MERN stack Mongo Express React节点并大量使用Material UI和Formik的应用程序。所讨论的功能是Formik表单中的Select,其中MenuItems是从所选设备的对象数组中动态创建的。以下是代码的简化版本:

<MySelect label="Facility" name="facility" className={classes.select}>
  <MenuItem value="">N/A</MenuItem>
  {facilities.map(facility => (
    <MenuItem key={facility._id} value={facility.name}>
      {facility.name}
    </MenuItem>
  ))}
</MySelect>
这里最值得注意的是,“可用值”列表没有显示任何设施的值,只显示“n/a”菜单项的空字符串。尽管出现此警告,select仍会将我的设施名称与带有相应值的菜单项正确匹配。我的第一个想法是,可能警告出现在“设施”填充之前,因此在生成警告时确实没有可用的值。但是,我可以通过将上面的代码更改为使用value={facility.\u id}而不是value={facility.name}来演示这种情况。当我这样做时,警告会按预期显示所有设施的id。我仍然会收到警告,因为匹配的值是名称而不是_id

请告诉我,是否有人可以解释为什么物料UI代码在设置为facility.name时看不到MenuItem值,但在设置为facility.name时它确实看到了这些值。\u id。谢谢

export const MySelect = ({ label, ...props }) => {
  const [field, meta] = useField(props);

  return (
    <>
      <InputLabel id="type-select-label">{label}</InputLabel>
      <Select labelId="type-select-label" id="type-select" {...field} {...props} />
      {meta.touched && meta.error ? <div>{meta.error}</div> : null}
    </>
  );
};
react_devtools_backend.js:2273 Material-UI: you have provided an out-of-range value `My Facility` for the select (name="facility") component.
Consider providing a value that matches one of the available options or ''.
The available values are ``. 
    at SelectInput (http://localhost:3000/static/js/0.chunk.js:132903:24)
    at div
    at InputBase (http://localhost:3000/static/js/0.chunk.js:125090:30)
    at WithStyles (http://localhost:3000/static/js/0.chunk.js:156624:31)
    at Input (http://localhost:3000/static/js/0.chunk.js:124496:32)
    ...