使用Redux的组件中的React-Date

Question

作为React和Redux中的新手，我正在尝试在组件中使用react-dates 。

这是我的代码：

import * as React from 'react';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as DateState from '../store/Date';
import * as SingleDatePicker from 'react-dates';

type DateProps = DateState.DateState & typeof DateState.actionCreators;

class DatePickerSingle extends React.Component<DateProps, any> {

    public render() {

        let { date } = this.props;
        return (
            <div>
                <SingleDatePicker
                    id="date_input"
                    date={this.props.date}
                    focused={this.state.focused}
                    onDateChange={(date) => { this.props.user({ date }); }}
                    onFocusChange={({ focused }) => { this.setState({ focused }); }}
                    isOutsideRange={() => false}
                    displayFormat="dddd LL">
                </SingleDatePicker>
            </div>
        );
    }
}

export default connect(
    (state: ApplicationState) => state.date, 
    DateState.actionCreators                 
)(DatePickerSingle);

这将返回以下错误：

Exception: Call to Node module failed with error: TypeError: Cannot read property 'focused' of null

据我了解， focused于onFocusChange应该会收到“日期选择器状态”。

文件：

onFocusChange是更新父组件中的焦点状态所必需的回调。 它需要一个{焦点：PropTypes.bool}形式的参数。

我认为问题在于我将DateState注入了DatePickerSingle组件中，该组件不知道focused状态。

是否可以同时使用我的“拥有”状态和DatePicker中的状态？ 还是最好的方法是什么？

我已经尝试了很长时间，希望有人可以帮助我。

更新

Answer 1

答案很简单： this.state为null，因为尚未初始化。 只需添加

constructor() {
  super();
  this.state = {
    focused: false
  }
}

来自redux的所有内容都将作为props传递给您的组件，除此之外，您还可以具有组件状态。