javascript - 无法读取未定义的属性“创建”——反应日期错误

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

导入“反应日期/初始化”；

从 react-dates 的 v13.0.0 开始，这个项目依赖于 react-with-styles。如果您想继续使用 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>
    );
  }
};