Material-UI TextField中独立组件内map函数失效问题求助

核心问题 #

你抽离的MapCastom组件接收参数的方式错误。React组件的第一个参数是props对象，而非直接传入的某个属性值。你现在直接写function MapCastom(options)，这里的options实际是包含options属性的props对象，而非你传递的数组，导致map遍历的是props对象而非目标数组，生成的MenuItem无法正确关联选中值。

修复方法 #

修改MapCastom组件的参数接收方式，通过解构赋值获取options数组：

function MapCastom({ options }) { // 解构props中的options属性
  return options.map((item) => (
    <MenuItem key={item} value={item}>
      {item}
    </MenuItem>
  ));
}

修改后，组件能正确遍历目标数组生成MenuItem，第二个TextField就能正常选中切换值了。

内容的提问来源于stack exchange，提问作者Екатерина