使用Redux的组件中的React-Dates

作为React和Redux的新手，我试图在组件中使用react-dates。使用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 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组件，它不知道focused状态注入DateState。

是否有可能将我的“自己”状态和DatePicker中的状态一起使用？或者什么是最好的方法？

我想了很长一段时间，我希望有人能帮助我。

UPDATE

来源

2017-03-15 JK87

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

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

任何从终极版未来将被传递到你的组件作为props，你除了可以有组件状态。

来源

2017-03-16 13:25:09 OlliM

谢谢@OlliM！虽然我现在收到以下错误：未捕获的TypeError：无法读取null的属性'getHostNode'当我将光标移动到Visual Studio中的this.setState（{focused}）时，仍然存在没有“聚焦”在我更新的问题中看到屏幕截图。 – JK87

嗯，该错误似乎被解决，但我仍然得到这个错误：'异常：调用节点模块失败，错误：不变违规：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件），但得到了：object。检查'DatePickerSingle'的渲染方法。' – JK87

发现问题。 'singledatepicker'组件中的date属性期望Momentjs [link]（https://momentjs.com/）对象。在我的reducer中，我已经格式化了它，所以它变成了一个字符串。一切都如预期般运作。感谢您的帮助！ – JK87

使用Redux的组件中的React-Dates

回答

相关问题