React中选择DateTime值时下拉菜单文本为空问题求助

嘿，这个问题我之前也碰到过！核心原因是Material-UI的DropDownMenu在匹配选中项时依赖**严格相等（===）**判断，而你第二个MenuItem的value写法刚好踩了这个坑。

问题根源拆解 #

• 第一个MenuItem的value是数字1，这是一个原始值，不管组件渲染多少次，这个值的引用和内容都是完全一致的。所以当你选中它后，state.value等于1，下次渲染时DropDownMenu能精准匹配到对应的MenuItem，显示正常。
• 但第二个MenuItem你写的是moment()，这意味着组件每一次重新渲染（比如调用setState后），都会生成一个全新的moment对象。当你选中这个选项时，state.value存的是当时生成的那个moment对象；等组件再次渲染，新的MenuItem又生成了一个新的moment对象——这两个对象虽然时间可能相同，但在JavaScript里是不同的引用，===判断会返回false。DropDownMenu找不到和state.value匹配的选项，自然就显示为空了。

两种可行的解决方案 #

方案一：将moment对象转换为原始类型（推荐）

把moment对象转成字符串（比如ISO格式）或者时间戳（数字），这样value就变成了原始值，不会有引用不一致的问题：

handleChange (event, index, value) { 
  this.setState({value: value}); 
}

<DropDownMenu value={this.state.value} onChange={this.handleChange} >
  <MenuItem value={1} primaryText="2 Hour" />
  {/* 转成ISO字符串 */}
  <MenuItem value={moment().toISOString()} primaryText="8 Hours" />
</DropDownMenu>

如果需要动态更新时间（比如每次打开下拉都取当前时间），这个方案更合适，因为每次渲染生成的字符串只要时间一致就会匹配。

方案二：将moment对象定义为常量，避免重复生成

把moment对象定义在组件外部或者constructor里，确保每次渲染时MenuItem的value都是同一个对象引用：

// 在组件外部定义常量，只初始化一次
const eightHourValue = moment();

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 1 };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (event, index, value) { 
    this.setState({value: value}); 
  }

  render() {
    return (
      <DropDownMenu value={this.state.value} onChange={this.handleChange} >
        <MenuItem value={1} primaryText="2 Hour" />
        <MenuItem value={eightHourValue} primaryText="8 Hours" />
      </DropDownMenu>
    )
  }
}

注意：这个方案里的moment对象只会初始化一次，如果你的需求是每次打开下拉都要获取当前时间，那这个方案就不适用了。

内容的提问来源于stack exchange，提问作者Rohit Kumar