Question

我对React Native还是比较陌生，我正在尝试创建自定义日历，并且遇到了与此this.setState有关的问题。基本上，当我在componentDidMount（）函数中有代码this.setState时，它会打印正确的数字；但是，当我在Calendar类中进行console.log时，它表示我的月份为0（初始值）。

我尝试过：

在构造函数中具有一个函数（即this.updateCurrentCalendar（））并在构造函数中运行该函数（返回卸载错误）
ComponentDidMount（）渲染前（当前版本）

这是我的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>
    )
  }

这是我的日历代码：

  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>

非常感谢您的帮助！

编辑：这是我的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);
  }

Answer 1

为什么不使用传递给Calendar类的道具而不将其分配给状态构造器

var lastMaxDay = this.findMaxDate（this.state.monthDate-1）;

宁可使用：

var lastMaxDay = this.findMaxDate（this.props.monthDate-1）;

当您收到这些作为道具时，我假设您不会从Calendar类中调用setState吗？

通过将它们分配给日历类中的状态，您尝试通过一个setState调用将setState分为2个不同的类。

Answer 2

.alert

将其保留在构造函数中，并将变量传递给Calendar组件

this.setState无法正常工作；子道具继承错误的信息-React-Native

2 个答案: