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

Question

我对 React Native 比较陌生，我正在尝试创建自定义日历，但遇到了一些关于 this.setState 的问题。基本上，当我在 componentDidMount() 函数中有代码 this.setState 并打印正确的数字时；但是，当我在日历类中执行 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>

非常感谢您的帮助！

编辑： 这是我在日历类中的构造函数

    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 调用在 2 个不同的类中设置状态。

Answer 2

this.tMonth =  parseInt(new Date().getMonth()+1);
this.tYear = parseInt(new Date().getFullYear());

将其保存在构造函数中并将变量传递给日历组件