javascript - 我必须点击两次才能重新渲染我的更新状态，并且回调函数不起作用

Question

我已经阅读了几个关于此的堆栈溢出答案并尝试实现它们但没有成功。我看到这是一个常见问题，它有一些答案、回调函数、componenentDidUPdate 以及如果您已经足够绝望的 setTimeout。这些都不适合我，甚至 setTimeout。我想我一定是做错了什么。

我当前的 setStates 有回调函数，但没有返回更新后的状态，而是返回旧状态。

我该如何解决这个问题，以便我的 View 以更新后的状态呈现？单击按钮后，this.state.scheduled 需要立即映射到更新后的状态。

state = {
    chosenDate: 'initial',
    scheduled: this.props.scheduled,
  }; 

chooseDate = (dateChosen) => {
    this.setState({ chosenDate: dateChosen })

    const today       = new Date();
    const yesterday = new Date().setDate(today.getDate()-1);

    if(this.state.chosenDate === 'today') {
      this.setState({ scheduled: this.props.scheduled.filter(event => event.scheduled_at.substring(0, 10) === dateFnsFormat(new Date(), 'yyyy-MM-dd')) }, () => console.log(this.state.scheduled));
    }

    if(this.state.chosenDate === 'yesterday') {
      this.setState({ scheduled: this.props.scheduled.filter(event => event.scheduled_at.substring(0, 10) === dateFnsFormat(new Date(yesterday), 'yyyy-MM-dd')) }, () => console.log(this.state.scheduled));;
    }
  };

render() {
    const { classes } = this.props;

    let eventDate = '';

    return (
      <div className={classes.root}>
        <div>
        {this.state.scheduled.map( event => {
          //https://date-fns.org/docs/format
          const scheduledDate = dateFnsFormat(new Date(event.scheduled_at), 'EEEE, MMMM do');
          const scheduledTime = dateFnsFormat(new Date(event.scheduled_at), 'p');
          //console.log('scheduledDate', scheduledDate);
          var dateHeader = <h3>{scheduledDate}</h3>;
          if (scheduledDate === eventDate) {
            dateHeader = "";
          } else {
            eventDate = scheduledDate;
          }
          return (
          <div key={event.post_id}>
          {dateHeader}
            <div onClick={() => this.editPost(event.post_id)} className={classes.event} key={event.post_id}>
            <p className={classes.eventTime}>{scheduledTime}</p>
            <p className={classes.eventTitle} title={event.description}>{event.title}</p>
            <div className={classes.socialIcons}>
              {event.platforms && event.platforms.includes("f") &&
                <img src={facebookcolor} alt="facebook" />
              }
              {event.platforms && event.platforms.includes("t") &&
                <img src={twittercolor} alt="twitter" />
              }
              {event.platforms && event.platforms.includes("i") &&
                <img src={instagramcolor} alt="instagram" />
              }
              {event.platforms && event.platforms.includes("p") &&
                <img src={pinterestcolor} alt="pinterest" />
              }
              {event.platforms && event.platforms.includes("y") &&
                <img src={youtubecolor} alt="youtube" />
              }
              </div>
            </div>
          </div>)
        })}
        </div>

        <div className={classes.chooseDate}>
          <p>Choose a date</p>
          <button onClick={() => this.chooseDate('today')}>Today</button>
          <button onClick={() => this.chooseDate('next week')}>Next 7 days</button>
          <button onClick={() => this.chooseDate('next month')}>Next 30 days</button>
          <button onClick={() => this.chooseDate('yesterday')}>yesterday</button>
          <button onClick={() => this.chooseDate('last week')}>Last 7 days</button>
          <button onClick={() => this.chooseDate('last month')}>Last 30 days</button>
        </div>
      </div>
    )
  }

Answer 1

感谢 lux 帮我解决这个问题!

我需要创建一个新函数来保存条件语句，并从 chooseDate 函数中的 setState 调用它们。

chooseDate = (dateChosen) => {
    this.setState({ chosenDate: dateChosen }, () => this.updateList())
  };

  updateList = () => {
    const today       = new Date();
    const yesterday = new Date().setDate(today.getDate()-1);
    const inAWeek   = new Date().setDate(today.getDate()+7);
    const in30Days   = new Date().setDate(today.getDate()+30);
    const lastWeek   = new Date().setDate(today.getDate()+7);
    const Last30Days   = new Date().setDate(today.getDate()+30);

    if(this.state.chosenDate === 'today') {
      this.setState({ scheduled: this.props.scheduled.filter(event => event.scheduled_at.substring(0, 10) === dateFnsFormat(new Date(), 'yyyy-MM-dd')) }, () => console.log(this.state.scheduled));
    }

    if(this.state.chosenDate === 'yesterday') {
      this.setState({ scheduled: this.props.scheduled.filter(event => event.scheduled_at.substring(0, 10) === dateFnsFormat(new Date(yesterday), 'yyyy-MM-dd')) }, () => console.log(this.state.scheduled));;
    }
  };