I am relatively new to React Native and I am trying to create a custom Calendar and I am running into some problems regarding this.setState.(我是React Native的新手,我试图创建一个自定义的Calendar,并且遇到有关this.setState的一些问题。)
Basically when I have the code this.setState in the componentDidMount() function and it prints the right number;(基本上,当我在componentDidMount()函数中有代码this.setState时,它会打印正确的数字;) However, when I did console.log in my Calendar class, it says that my month is 0 (innitial value).(但是,当我在Calendar类中进行console.log时,它表示我的月份为0(初始值)。)
I have tried:(我试过了:)
having a function in the constructor (ie. this.updateCurrentCalendar()) and ran that in the constructor (returned unmounted error)(在构造函数中具有一个函数(即this.updateCurrentCalendar())并在构造函数中运行该函数(返回卸载错误))
ComponentDidMount() before render (current version)(渲染之前的ComponentDidMount()(当前版本))
Here is my CalendarPage code:(这是我的CalendarPage代码:)
componentDidMount(){
var tMonth = parseInt(new Date().getMonth()+1);
var tYear = parseInt(new Date().getFullYear());
//ran ,()=>console.log after the first argument in this.setState and returns the correct month
this.setState({trackMonth: tMonth, trackYear: tYear});
}
render(){
return(
<View style = {styles.CalendarViewStyle}>
<Calendar style = {styles.CalendarStyle} thisMonth = {this.state.trackMonth} thisYear = {this.trackYear}/>
<Button
title = "Next"
onPress = {()=>this.setState({trackMonth: this.state.trackMonth+1})}/>
<Button
title = "Back"
onPress = {()=>this.setState({trackMonth: this.state.trackMonth-1})}/>
</View>
)
}
And Here is my Calendar code:(这是我的日历代码:)
componentDidMount(){
//console.log(this.state.monthStartDay) says it is 0 here*
//finding the maximum day in a month
var maxDay = this.findMaxDate(this.state.monthDate);
this.setState({maxDate: maxDay});
//finding which day does the first day of the path starts
var startDay = this.findDay(1);
this.setState({monthStartDay: startDay});
//first week start day (if first day of the month does not start on monday)
var fLineStartDate = this.findFirstLineStartDate();
this.setState({firstLineStartDate: fLineStartDate});
//second week start day
var sLineStartDate = this.findSecondStartLine(fLineStartDate+7);
this.setState({secondLineStartDate: sLineStartDate});
}
render(){
var lastMaxDay = this.findMaxDate(this.state.monthDate-1);
return(
<View style = {styles.CalendarViewStyle}>
<CalendarLine
style = {styles.CalendarLineStyle}
item = {{lineDay: this.state.firstLineStartDate, maxDay: this.state.maxDate, lineNum: 0, lastMaxDay: lastMaxDay}}/>
</View>
Thank you very much for the help!(非常感谢你的帮助!)
EDIT: This is my constructor in my Calendar class(编辑:这是我的Calendar类中的构造函数)
constructor(props){
super(props);
this.state = {
monthStartDay: 0,
firstLineStartDate: 0,
secondLineStartDate: 0,
monthDate: this.props.thisMonth,
yearDate: this.props.thisYear,
maxDate:0,
};
this.findDay = this.findDay.bind(this);
this.findMaxDate = this.findMaxDate.bind(this);
this.findLeapYear = this.findLeapYear.bind(this);
this.findFirstLineStartDate = this.findFirstLineStartDate.bind(this);
this.findSecondStartLine = this.findSecondStartLine.bind(this);
}
ask by Tan Saint translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…