Question

此问题来自使用MERN堆栈（Mongo Express React Node）并大量使用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>

此“ MySelect”组件的代码遵循Formik上的this tutorial，但我在下面包括了它：

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}
    </>
  );
};

它以一种形式使用，其中用户正在更新有关某个对象的信息，该对象的一个属性是“设施”。正在将Formik表单的“ initialValues”装入对象的当前值，包括其“功能”（它是一个字符串），在此示例中，字符串为“我的功能”。该代码正常工作，但出现以下警告：

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

此处最值得注意的是，“可用值”列表未显示任何设施的值，仅显示了“ n / a” MenuItem的空字符串。尽管有此警告，但select仍将我的设施名称与具有相应值的MenuItem正确匹配。我首先想到的是，警告可能是在“设施”被填充之前发出的，因此在生成警告时实际上没有可用的值。但是，事实并非如此，我可以通过将上面的代码更改为使用value={facility._id}而不是value={facility.name}来演示。当我这样做时，警告会按预期显示所有设施的ID（我仍然会收到警告，因为匹配的值是名称而不是_id）。

请让我知道是否有人可以解释为什么Material-UI代码在设置为facility.name时看不到MenuItem值，但在设置为faciliy._id时却看到了MenuItem值。谢谢！

材质用户界面选择警告错误，声称“空值”为空

0 个答案: