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

这会返回以下错误：

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

focused onFocusChange应该会收到＆＃34; datepicker状态＆＃34;据我所理解。

文件：

  

onFocusChange是更新焦点状态所需的回调   父组件。它期望形式的单个参数{   focus：PropTypes.bool}。

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

是否可以使用我自己的＆＃34;状态和DatePicker的状态在一起？或者最好的方法是什么？

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

更新

Answer 1

答案很简单：main.js为空，因为它尚未初始化。只需添加

this.state

来自redux的任何内容都将作为constructor() { super(); this.state = { focused: false } } 传递给您的组件，除此之外您还可以拥有组件状态。