Javascript 具有动态值的菜单项在物料界面中不起作用

我正在使用选择，在React的材质UI中，当我从选择器中选择时，我总是未定义。 当我们使用MenuItem值动态时，总是会发生这种情况。但是如果我使用静态值而不是动态值，它会很好地工作。但我必须以动态方式使用.map操作符

请提供在动态值中运行良好的解决方案

像这样->

---

请参阅它不起作用

问题是您正在使用div包装MenuItem。MenuItem元素必须是material ui的直接后代：

⚠️当使用本机时，MenuItem元素必须是直接子体 错

要解决此问题，请删除包装div：

<Select value={personName} onChange={onTargetIdentityChange}>
    {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) =>{
    let children = [];

    children.push(<ListSubheader>{identityTypeKey}</ListSubheader>); 
      splitedIdenties[identityTypeKey].forEach(identity => {
        children.push(<MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>)
      })

      return children;
    }
  )}
</Select>

---

问题是您正在使用div包装MenuItem。MenuItem元素必须是material ui的直接后代：

⚠️当使用本机时，MenuItem元素必须是直接子体 错

要解决此问题，请删除包装div：

<Select value={personName} onChange={onTargetIdentityChange}>
    {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) =>{
    let children = [];

    children.push(<ListSubheader>{identityTypeKey}</ListSubheader>); 
      splitedIdenties[identityTypeKey].forEach(identity => {
        children.push(<MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>)
      })

      return children;
    }
  )}
</Select>

---

你有没有试过不用div包装ListSubHeader和MenuItems？请提供livedemo@xadm我已经添加了上面的链接，请检查。你有没有试过不用div包装ListSubHeader和MenuItems？请提供livedemo@xadm我已经添加了上面的链接，请检查。您可以使用或任何其他组件，而不是-正如您所写的-唯一的要求，所有都不能包装，必须是@xadm的直接子级谢谢！你是对的。Listsubheader实际上没有什么问题。我编辑了我的答案。@I我认为这是可行的，但有2个错误即将出现。请告诉我们如何克服这些问题。@hardy你没有提到错误是什么时候抛出的，我想是在你点击SubListheader时吧？如果是这样的话，克服这种情况的一种方法是使用列表副标题而不是列表副标题。您可以看到您可以使用的示例或任何其他组件，而不是—正如您所写的—仅限要求，所有内容都不得包装，必须是@xadm的直接子项谢谢！你是对的。Listsubheader实际上没有什么问题。我编辑了我的答案。@I我认为这是可行的，但有2个错误即将出现。请告诉我们如何克服这些问题。@hardy你没有提到错误是什么时候抛出的，我想是在你点击SubListheader时吧？如果是这样的话，克服这种情况的一种方法是使用列表副标题而不是列表副标题。你可以看到一个例子

<Select value={personName} onChange={onTargetIdentityChange}>
    {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) =>{
    let children = [];

    children.push(<ListSubheader>{identityTypeKey}</ListSubheader>); 
      splitedIdenties[identityTypeKey].forEach(identity => {
        children.push(<MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>)
      })

      return children;
    }
  )}
</Select>