Javascript 我必须单击两次以重新呈现更新状态，而回调函数不'；行不通

我已经阅读了几个关于堆栈溢出的答案，并尝试实现它们，但没有成功。我发现这是一个常见的问题，有一些答案、回调函数、componenentDidUPdate和setTimeout。这些对我都不管用，甚至都不行。我想我一定是做错了什么

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

如何修复此问题，使视图以更新状态呈现？单击按钮后，需要立即将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>
    )
  }

状态={
chosenDate:'首字母'，
预定：this.props.scheduled，
}; 
选择日期=（选择日期）=>{
this.setState（{chosenDate:dateselected}）
const today=新日期（）；
const dayed=new Date（）.setDate（today.getDate（）-1）；
如果（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））；
}
如果（this.state.chosenDate===‘昨天’）{
this.setState（{scheduled:this.props.scheduled.filter（event=>event.scheduled_at.substring（0,10）==dateFnsFormat（新日期（昨天），'yyyyy-MM-dd'））}，（）=>console.log（this.state.scheduled））；；
}
};
render（）{
const{classes}=this.props；
让eventDate=''；
返回(
{this.state.scheduled.map（事件=>{
//https://date-fns.org/docs/format
const scheduledDate=dateFnsFormat（新日期（event.scheduled_at），'EEEE，MMMM do'）；
const scheduledTime=dateFnsFormat（新日期（event.scheduled_at），'p'）；
//log（'scheduledDate'，scheduledDate）；
var dateHeader={scheduledDate}；
if（scheduledDate==eventDate）{
dateHeader=“”；
}否则{
eventDate=scheduledDate；
}
返回(
{dateHeader}
this.editPost（event.post_id）}className={classes.event}key={event.post_id}>
{scheduledTime}
{event.title}
{event.platforms&&event.platforms.includes（“f”）&&
}
{event.platforms&&event.platforms.includes（“t”）&&
}
{event.platforms&&event.platforms.includes（“i”）&&
}
{event.platforms&&event.platforms.includes（“p”）&&
}
{event.platforms&&event.platforms.includes（“y”）&&
}
)
})}
选择一个日期

this.choostate（'today'）}>today
这个。选择state（'nextweek'）}>next7天
this.choostate（'next month'）}>next 30天
这是昨天
this.choostate（'last week'）}>last 7天
this.choostate（'last month'）}>last 30天
)
}

感谢勒克斯帮我解决了这个问题

我需要创建一个新函数来保存条件语句，并从Choostate函数中的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));;
    }
  };

试试这个：

const today       = new Date();
const yesterday = new Date().setDate(today.getDate()-1);
this.setState({ chosenDate: dateChosen }, () => {
  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));;
  }

})

---

我所做的是在第一个函数的setState之后包装其他函数，因为setState是异步的，所以在再次按下之前，您不会得到新值，但是通过使用回调函数，您只能在确保它已更新后使用它的值，希望这是有意义的，但是问题是，您试图在更新之前使用一个值，因为这个.setState是异步的，按照您编写代码的方式，它第一次可以工作，但实际上第二次可以工作，因为状态已更新，所以您可能通过将下一个状态计算到函数中而不是原始状态来解决这个问题，所以你可以这么做

chooseDate = (dateChosen) => {
  this.setState((previousState) => {
    const { scheduled } = previousState;
    const nextState = { chosenDate: dateChosen }; // prepare the next state
    const today       = new Date();
    const yesterday = new Date().setDate(today.getDate()-1);

    if (dateChosen === 'today') {
      nextState.scheduled = scheduled.filter(event => event.scheduled_at.substring(0, 10) === dateFnsFormat(new Date(), 'yyyy-MM-dd'));
    }

    if (dateChosen === 'yesterday') {
      nextState.scheduled = scheduled.filter(event => event.scheduled_at.substring(0, 10) === dateFnsFormat(new Date(yesterday), 'yyyy-MM-dd'));
    }

    return nextState;
  }, () => console.log(this.state.scheduled))
};

这样，您可以基于上一个状态计算下一个状态

通过这样做，您可以确保您的组件只更新一次，因此您保存了第二次更新，从而使您的组件获得更好的性能

---

希望它对您有用。

首先您

this.setState（{chosenDate:dateselected}）

然后立即尝试在下面的条件中使用

this.state.chosenDate

。这不起作用，因为

setState

是异步的。没有任何保证

this.state.chosenDate

就是您上面设置的。这就是问题所在，我刚刚创建了一个新函数来将条件语句放入其中，现在它正在工作！非常感谢：）