React JS渲染函数中State值为空问题求助

嘿，我仔细看了你的代码片段，发现几个关键问题导致你设置state后访问为空、手动设置却正常的情况，咱们一步步来修复：

问题分析 #

• 初始state缺少value字段：你在handleChange里更新的是this.state.value，但在constructor的state初始化里根本没定义这个属性，所以一开始this.state.value是undefined，SelectField没法正确绑定初始值。
• 第一个MenuItem属性错误：你给第一个MenuItem用了defaultValue，但Material-UI的MenuItem应该用value属性来定义选项值，和另外两个保持一致。
• render方法遗漏return：你的render函数没有返回JSX内容，这会导致组件无法正常渲染，也是隐性问题之一。
• moment对象直接输出问题：startTime和endTime是moment时间对象，直接在页面输出会显示[object Object]，需要转换为可读字符串。

修复后的代码 #

// class definition
class DowntimeAcknowledgeComment extends React.Component{
 constructor(props){
 super(props);
 this.state = {
 comment: '',
 startTime : Datetime.moment(),
 endTime : Datetime.moment().add(2, 'h'),
 value: Datetime.moment().add(2, 'h') // 新增初始value，对应第一个选项的值
 };
 // function binding
 this.handleChange = this.handleChange.bind(this);
 }
 // handle change function
 handleChange(event, index, value){
 this.setState({value: value}); // 现在state里有value字段，更新后就能正常访问
 }
 // render function
 render(){
 return (
 <div className="inline-block ">
 <div className="width-80px margin-4px">Downtime for:</div>
 <MuiThemeProvider >
 <SelectField value={this.state.value} onChange={this.handleChange} >
 {/* 把defaultValue改成value，统一属性名 */}
 <MenuItem value={this.state.endTime} primaryText="2 Hours" />
 <MenuItem value={this.state.startTime} primaryText="8 Hours" />
 <MenuItem value="manual" primaryText="Manual"/>
 </SelectField>
 </MuiThemeProvider>
 {/* 用format()把moment对象转成可读时间字符串 */}
 <p>Hello there, selected time: {this.state.value ? this.state.value.format('YYYY-MM-DD HH:mm') : ''}</p>
 </div>
 )
 }
}

额外说明 #

修改后，页面加载时SelectField会默认选中第一个选项，选中其他MenuItem时this.state.value也会正确更新并显示，不会再出现为空的情况。如果需要切换到"Manual"选项后做额外逻辑，还可以在handleChange里加个判断，比如：

handleChange(event, index, value){
  this.setState({value: value});
  if(value === 'manual'){
    // 手动模式的逻辑处理
    console.log('切换到手动模式');
  }
}

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