未定義 - 反応日エラーの 'create'プロパティを読み取ることができません

Question

'react-dates'ライブラリからSingleDatePickerを追加する際に、このエラーが発生します。すべてを試しましたが、エラーを見つけることができませんでした。このコードは、カレンダーを表示し、ユーザーから選択した日付を表示するだけです。助けてください！あなたが適切な状態をinitlizingいない

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 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> 
    ); 
    } 
}; 

私はクローム-devのツールで取得していますエラー：ここ コードです。あなたはそうのように、コンストラクタを使用する必要があります。

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> 
    ); 
    } 
}; 

Answer 2

私は私のテストで同じエラーを持って、import 'react-dates/initialize';それを修正を加えます。

は私がコンストラクタのための必要性を（バベル・プラグイン・変換・クラスのプロパティを使用していないのですhttps://github.com/airbnb/react-dates#initialize