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

回答

相關問題