无法读取未定义的属性'create' -- 反应日期错误

Question

从"反应日期"库添加SingleDatePicker时，我收到了此错误。尝试了所有方法，但找不到错误。该代码只是显示日历并显示用户选择的日期。请帮忙！这是代码：

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
export default class ExpenseForm extends React.Component {
  state = {
    createdAt: moment(),
    calenderFocused: false
  };
  onDateChange = (createdAt) => {
    this.setState(() => ({ createdAt }));
  };
  onFocusChange = ({ focused }) => {
    this.setState(() => ({ calenderFocused: focused }));
  };
  render() {
    return (
      <div>
        <form>
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendcalenderFocused}
            onFocusChange={this.onFocusChange}
          />
        </form>
      </div>
    );
  }
};

我在chrome开发工具中遇到的错误：

Uncaught TypeError: Cannot read property 'create' of undefined
    at Object.createLTR [as create] (ThemedStyleSheet.js?17e6:46)
    at WithStyles.maybeCreateStyles (withStyles.js?55c9:121)
    at WithStyles.componentWillMount (withStyles.js?55c9:107)
    at callComponentWillMount (react-dom.development.js?cada:6337)
    at mountClassInstance (react-dom.development.js?cada:6393)
    at updateClassComponent (react-dom.development.js?cada:7849)
    at beginWork (react-dom.development.js?cada:8233)
    at performUnitOfWork (react-dom.development.js?cada:10215)
    at workLoop (react-dom.development.js?cada:10279)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:540)
The above error occurred in the <withStyles(SingleDatePicker)> component:
    in withStyles(SingleDatePicker) (created by ExpenseForm)
    in form (created by ExpenseForm)
    in div (created by ExpenseForm)
    in ExpenseForm (created by AddExpensePage)
    in div (created by AddExpensePage)
    in AddExpensePage (created by Route)
    in Route (created by AppRouter)
    in Switch (created by AppRouter)
    in div (created by AppRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppRouter)
    in AppRouter
    in Provider

Answer 1

我在测试中遇到了同样的错误，并添加了import 'react-dates/initialize';修复了它。

请参阅 https://github.com/airbnb/react-dates#initialize

Answer 2

导入'react-date/initialize';

从 react-date 的 v13.0.0 开始，该项目依赖于 react-with-styles。如果你想继续使用CSS样式表和类，需要一些额外的设置来开始工作。因此，您需要导入反应日期/初始化以在我们的组件上设置类名。

参考： https://github.com/airbnb/react-dates

Answer 3

您没有正确启动状态。你应该使用构造函数，如下所示：

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
export default class ExpenseForm extends React.Component {
  constructor(props){
      super(props);
      this.state = {
         createdAt: moment(),
         calenderFocused: false
      }
  }
  onDateChange = (createdAt) => {
    this.setState(() => ({ createdAt }));
  };
  onFocusChange = ({ focused }) => {
    this.setState(() => ({ calenderFocused: focused }));
  };
  render() {
    return (
      <div>
        <form>
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendcalenderFocused}
            onFocusChange={this.onFocusChange}
          />
        </form>
      </div>
    );
  }
};