reactjs - 如何解决状态更新的时间以保存反应中的双击

Question

我已经实现了一些基本逻辑来使用日期选择器来更改状态中的日期，然后将其作为字符串传递给变量（json 路径）。我的问题是我需要单击日期选择器两次才能更改内容。我希望有人可以帮助我订购，以便在重新渲染之前更新状态（如果有意义的话）？

import React, {Component} from "react";
import '../styles/style.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

class Mainstage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      itemsLeft: [],
      startDate: new Date(),
      startDateFormatted: Intl.DateTimeFormat('en-CA', {year: 'numeric', month: '2-digit',day: '2-digit'}).format(new Date()),
      endDate: new Date(),
      endDateFormatted: Intl.DateTimeFormat('en-CA', {year: 'numeric', month: '2-digit',day: '2-digit'}).format(new Date())
    };
    this.handleChangeStart = this.handleChangeStart.bind(this)
    this.handleChangeEnd = this.handleChangeEnd.bind(this)
  }

  handleChangeStart(date) {
    this.setState({
      startDate: date,
      startDateFormatted: Intl.DateTimeFormat('en-CA', {year: 'numeric', month: '2-digit',day: '2-digit'}).format(date)

    })
  }

  handleChangeEnd(date) {
    this.setState({
      endDate: date,
      endDateFormatted: Intl.DateTimeFormat('en-CA', {year: 'numeric', month: '2-digit',day: '2-digit'}).format(date)
    })
  }

  componentDidMount() {
    var Data_Left_URL = `http://localhost:5000/changeatdate/${this.state.change}/${this.state.startDateFormatted}`;

    fetch(Data_Left_URL)
      .then(resultsLeft => {
        return resultsLeft.json()
      })
      .then(dataLeft => {
        let itemsLeft = dataLeft.map((i) => {
          return(
            <ul key={i.containerId} className='container'>
              <h1>{i.containerName}</h1>
              {
                i.vitems.map(el => <li key={el.itemId} className='itemStatusCss' style={{backgroundColor: el.css}}><span className='itemname'>{el.itemName}</span></li>)
              }
            </ul>
          )
        })
        this.setState({itemsLeft});
      })

更新：这是渲染部分：

render() {
    console.log('StartDate: ',this.state.startDateFormatted);
    console.log('EndDate: ', this.state.endDateFormatted)
    return (
      <div id='mainstage'>
        <div id='mainstage1'>
          <span className='datepicker'>
            <DatePicker
              selected={this.state.startDate}
              selectsStart
              startDate={this.state.startDate}
              endDate={this.state.endDate}
              showMonthDropdown
              showYearDropdown
              dateFormat="dd/MM/yyyy"
              onChange={this.handleChangeStart}
            />
          </span>
          {this.state.itemsLeft}
        </div>

        <div id="mainstage2">
          <span className="breaker"></span>
          <span id="ganttbarend"></span>
          <span id="ganttbarmiddle"></span>
          <span id="ganttbarend"></span>
          {this.state.gantt}
        </div>

        <div id='mainstage3'>
          <span className='datepicker'>
            <DatePicker
              selected={this.state.endDate}
              selectsEnd
              startDate={this.state.startDate}
              endDate={this.state.endDate}
              dateFormat="dd/MM/yyyy"
              showMonthDropdown
              showYearDropdown
              onChange={this.handleChangeEnd}
              minDate={this.state.startDate}
            />
          </span>
          {this.state.itemsRight}
        </div>
      </div>
    );
  }
}

标签： reactjsstate