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

Question

我对 React Native 比较陌生，我正在尝试创建一个自定义日历，但遇到了一些有关 this.setState 的问题。基本上，当我在 componentDidMount() 函数中有代码 this.setState 时，它​​会打印正确的数字；然而，当我在 Calendar 类中执行 console.log 时，它说我的月份是 0(初始值)。

我已经尝试过:

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

这是我的日历页面代码:

  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 类的 props 而不将它们分配给状态构造函数

var lastMaxDay = this.findMaxDate(this.state.monthDate-1);

而是使用:

var lastMaxDay = this.findMaxDate(this.props.monthDate-1);

当您收到这些作为 props 时，我假设您不会从 Calendar 类中调用它们的 setState ？

通过将它们分配给日历类中的状态，您可以尝试通过一次 setState 调用在 2 个不同的类中设置 State。