无法读取未定义的 React 材料设计的属性“日期”

Posted 2023-02-23

【中文标题】无法读取未定义的 React 材料设计的属性“日期”

【英文标题】：Cannot read property 'date' of undefined React material design

【发布时间】：2018-10-28 19:49:02

【问题描述】：

我正在为应用程序使用 storybook reactJs 和 material-ui。我正在尝试从Material-ui component 构建 datepicker，下面是我的代码

import React,  Fragment, PureComponent  from 'react';
import  DatePicker  from 'material-ui-pickers';

class DatePickers extends PureComponent 
  state = 
    selectedDate: new Date(),
  

  render() 
    console.log(this.state);
  const   selectedDate  = this.state;

    return (
      <div>
        <DatePicker
          label="Basic example"
          value=selectedDate
          onChange=this.handleDateChange
          animateYearScrolling=false
          />
      </div>
    )
  


export default DatePickers;

当我打开我的故事书时，它显示以下错误 无法读取未定义的属性“日期”

TypeError：无法读取未定义的属性“日期” 在 DatePickerWrapper.PickerBase._this.getValidDateOrCurrent (http://localhost:6006/static/preview.bundle.js:52555:24) 在 DatePickerWrapper.PickerBase (http://localhost:6006/static/preview.bundle.js:52559:19)

有谁知道。这是怎么回事？

【问题讨论】：

您是否尝试过在 constructor() 中移动您的状态分配？

您是否尝试过使用const selectedDate = this.state.selectedDate;？

【参考方案1】：

查看包含DatePicker 组件代码的this working example。

错误可能如下所示 - 您是否将组件包装在 MuiPickersUtilsProvider 中并提供了所需的 utils 属性？

<MuiPickersUtilsProvider utils=MomentUtils>
  <DatePicker />
</MuiPickersUtilsProvider>

【讨论】：

工作。谢谢 。但是你知道为什么会有滚动条

箭头不见了

不确定你在说什么滚动条。而且箭头丢失是因为你没有导入 Material UI 图标。请参考this page - 在最底部有一个Font Icons 部分。您需要包含图标。更新沙盒 - codesandbox.io/s/1r9x22pk5q