React渲染moment对象_d时报“Objects are not valid as a React child”错误

• 直接访问this.state.scheduleDate._d拿到的值本质是原生Date实例对象，不是字符串、数字这类React可以直接渲染的原始类型。React遇到非原始值的对象类型作为子元素时，就会触发"Objects are not valid as a React child"的报错，哪怕这个Date实例在控制台打印的内容看起来和普通文本完全一致，类型上它依然是对象，不符合React的渲染规则。
• 下划线开头的_d是Moment库标记的内部私有属性，不属于对外公开的可用API，依赖这类私有属性编写的代码稳定性极差，后续Moment版本迭代调整内部结构时，代码很容易直接失效。

• 优先使用Moment对外公开的格式化方法，将日期转换为纯字符串后再渲染，根据需要的展示格式调用format()方法即可：

  <p>{this.state.scheduleDate.format('YYYY-MM-DD HH:mm:ss')}</p>
  

  该方法的返回值是纯文本字符串，完全符合React的渲染要求，也不受Moment内部结构调整的影响。
• 禁止直接将Moment对象本身作为React子元素渲染：Moment本身也是一个复杂的JS对象，直接写{this.state.scheduleDate}同样会触发同类型的报错，所有从Moment实例中取出用于渲染的值，都必须转换为字符串、数字这类原始类型。
• 如果有特殊场景必须读取原生Date实例，也要手动将Date对象转换为字符串后再渲染，不能直接把Date对象塞进JSX的渲染位置：

  {/* 非推荐实现，仅作场景说明 */}
  <p>{this.state.scheduleDate._d.toString()}</p>
  

  实际开发中依然更建议直接使用Moment自带的格式化能力，完全没必要依赖私有属性取值。

内容的提问来源于stack exchange，提问作者vaibhav deep