無法讀取未定義的屬性'create' - react-date錯誤

Question

從'react-dates'庫中添加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-dev-tool中遇到的錯誤：

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

import'alaction-dates / initialize';

從反應日期的v13.0.0開始，該項目依賴於反應風格。 如果您想繼續使用CSS樣式表和類，需要進行一些額外的設置才能完成任務。 因此，您需要導入react-dates / initialize以在我們的組件上設置類名。

參考： 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>
    );
  }
};