使用 Redux 的组件中的 React-Dates

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

此returns以下错误：

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

据我了解，

focused 一个 onFocusChange 应该收到 "datepicker state"。

文档：

onFocusChange is the callback necessary to update the focus state in the parent component. It expects a single argument of the form { focused: PropTypes.bool }.

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

是否可以同时使用我的 "own" 状态和 DatePicker 中的状态？或者最好的方法是什么？

我已经试了好久了，希望有人能帮我解决这个问题。

更新

Answer 1

答案很简单：this.state为空，因为它还没有被初始化。只需添加

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

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

使用 Redux 的组件中的 React-Dates

React-Dates in component using Redux

reactjs

react-native

redux

react-redux

react-dates